[Support request] mobile frontpage layout

[Norman]

Hi!

So the mobile header has a width that’s different than the rest of the page. Is it my phone, or do you also see it that way?
Also, the footer has a strange width/layout (don’t know the right word).

Any idea what the problem is?

Thanks!

http://www.fairfieldcollege.nl/nieuwesite

[Leo]

Hi Norman,

Mobile header looks normal to me. Here is what I see: https://s29.postimg.org/62v6o7njr/IMG_5531.png

As for footer widgets, look like you have this CSS added:

.footer-widgets, .widget-area .widget {
    padding-left: 140px;
    padding-right: 140px;
}

You should be able to use customizer feature for that: https://docs.generatepress.com/article/footer-padding/#footer-widget-area

Let me know if this helps.

[Norman]

Leo, thanks for the reply.

I’m still having some issues concerning the upper part of the front page.

I made the site using Safari. It shows perfectly here. But when I open the site with Firefox or IE on windows, it changes the layout a bit. I added pictures to show.

I also added a picture of the mobile layout, not sure why it’s different on your phone.

https://postimg.org/gallery/2ebrfyyp0/

This is the site: http://www.fairfieldcollege.nl/nieuwesite

edit: SOMEHOW I corrected the mobile layout:) but now the logo is squeezed..

[Leo]

Hmm the mobile layout and the logo both look fine to me:
https://s4.postimg.org/5rkqvs0bh/IMG_5534.png

Maybe try clearing cache?

As for the blocks that are misaligned, you should check with Elementor since the code is from them.

[Norman]

It’s so strange it looks fine on your mobile.

But thanks again!

[Leo]

What browser are you using on your phone? I’m using chrome.

I assume the problem is that the text is blocking the face? If so that content is also Elementor so might be best to check with them 🙂

[Tom]

It looks like there’s some horizontal scroll which is probably causing that issue for you.

Try this:

.elementor {
    overflow-x: hidden;
}

[Author]

Posts