Some glitches to be solved

Jurrie68 · May 2015

Hi,

I've finally got my site online, but there're are some issues for which I cannot find the solution.

Firstly, The logo, i've placed in the header is'nt centered when I watch it on my mobile.

secondly, I've used some big images as separators for in between chapters. Right now they are set as backround images for a section.

Sadly that makes them non-responsive, en increase the loading time on mobile web. (It looks a bit strange too, because you can only see a smaal part of the image.

Is there way of solving these 2 issues?

The url is www.lemasdenhaut.nl/test

thanx?

www

Albert · May 2015

Hi,

1. Logo is not centered, because is too big for mobile devices. Below css will do the trick in this case only:

@media only screen and (max-width: 479px) {
    #Top_bar .logo #logo {
        padding: 0;
        width: 260px !important;
    }
}

2. To make images responsive, you must always use class="scale-with-grid".

Jurrie68 · May 2015

Oh, and forgot another issue.

I've loaded some images in gallery's inside tabs. These images are ment to be square, but are not loading right on mobile. is there a solution for that as well?

Albert · May 2015

It's because of old theme version you use. With recent theme version gallery display properly on mobile devices.

Jurrie68 · May 2015

Thanks!

Jurrie68 · May 2015

Logo is fine now, thanks a lot!

but the scale-wth-grid class. How and where exactly can i do this?

I tried to put class="scale-with-grid" in the custom class field of the section, but that does'nt really work. Also tried just filling in: "scale-with-grid" and scale-with-grid but that does'nt work either...

Albert · May 2015

It depends where you want to do this. If you will send us url to page where you did it and tell us where you exactly used this class, we can check if you did it properly.

Jurrie68 · May 2015

Oké. That would be nice. The url is www.lemasdenhaut.nl/test

regards,

Jur

Albert · May 2015

Ok. Please use below css and this should help you a lot:

.shadowbox4links {
    max-width: 100%;
    box-sizing: border-box;
}

Jurrie68 · May 2015

Thanx for your reply!

Done that, but that line doesn't adress the "tussenbanner sections" wich are the images I want to scale for use on mobile devices. Right now they're loading on a 100% on mobile devices. But I'm looking for a way to scale those in order to reduce loading times and improve the look on mobile devices?

I've tried to use the scale-with-grid class, but it doesn't seem to do anything right now?

thmks,

Jur

Jurrie68 · May 2015

Or would it be an idea to clone those sections with smaller images and toggle between the visibility (e.g. Hide the smaller sections on desktop and the large ones on mobile?)

Albert · May 2015

If this is not what you are looking for, you can use different sections with different images on mobile devices. When you create section, you have option to select on what devices section should be visible and this is probably the only way to do what you want.

Jurrie68 · May 2015

That's what I meant, think i'll do that....

thnx!

Jurrie68 · June 2015

Thanx for all the support! It's allmost done. One more thing:

The client say's that in Internet explorer the site does'nt work well. Images that are too large?

Is there something I can do about this?

regards,

Jur

Albert · June 2015

Is your client talking about IE8?

Jurrie68 · July 2015

I don't know. I'll ask...

Does that matter?

Albert · July 2015

Yes, that matter and is very important.

Some glitches to be solved

Comments