Website content overflowing in mobile view after removing background

After I removed the background, the content on my site is overflowing in mobile view, making the site move from left to right.

  • Adam Czajczyk
    • Support Gorilla

    Hello Farzan Ahmed

    I hope you’re fine today!

    I checked the site and the issue is a bit difficult to pinpoint due to the fact that it doesn’t show up in a “mobile view” in any browser but it’s only visible on a real mobile devices (where there are limited options of investigation).

    However, it seems that this only happens when “entire header” is visible (so before you scroll the site down) and there’s “something” in that “full header” that is “pushing” the header width to the sides outside of the screen boundaries.

    It looks to me like those might be paddings around the logo image so try reducing them by adding following CSS to the site (just make sure to clear all caches after doing that):

    .header-section .header-inner .site-logo {
    padding-left:0;
    padding-right:0;
    }

    See if that helps and let me know, please. If it doesn’t, we’ll try few more things in order to “poinpoint” the culprit.

    Best regards,

    Adam

  • Farzan Ahmed
    • The Crimson Coder

    Hi Adam

    Thanks for that – I tried that CSS, and it didn’t work.

    BUT, that background is for a background image – I removed the background image to see if that closes the container or something, but it just left a gap.

    I’ve put a random one back there for you if that helps to identify an element or something?

    Thanks

    Farzan

  • Adam Czajczyk
    • Support Gorilla

    Hi Farzan Ahmed

    Thanks for giving it a try and for enabling background back!

    I’m still pretty sure the issue is not actually related to background itself but having the image there helps “see” blocks behavior.

    I did some more tests on site and I’m still thinking it’s related to that entire header section. There’s “something” in it that “pushes” the page to be slightly bigger than the viewport (the issue doesn’t happen – tested on mobile device – if the page is scrolled down so the menu part of header gets “sticky” at the top). I must admit, though, that I’m having a hard time identifying what that is.

    I looked through pretty much all the elements on the page and all the dimensions seem to fit and behave nice. The issue is not even visible in browser’s “responsive view” so I can only replicate it when visiting the site on an actual smartphone (I checked with both native android browser and with chrome).

    I admit I’m stuck. I’m pretty sure I’m missing something quite simple there but can’t find what that is. I’ve asked our developers to take a look at it and hopefully they’ll be able to spot what I am missing. We’ll update you here as soon as they take a look.

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.