[Resolved] Strange White Space Appeared Down the Right of Page on Mobile

Home Forums Support Strange White Space Appeared Down the Right of Page on Mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1456039
    Oisin

    Hi Guys,

    I was putting the finishing touches on a page and noticed this strange white space all down the right of my page. You can see it clearly if you scroll to the footer on mobile.

    Maybe you might be able to see what’s causing it? If so, I’d be curious to know how you found the cause.

    Many thanks,

    Oisín.

    #1456054
    Leo
    Staff
    Customer Support

    Hi there,

    Tough to tell but I think it’s from the first GB container block.

    Are you able to remove that one to test?

    I think it’s because of the negative margin left here:
    https://www.screencast.com/t/pK1g9tBEz

    #1456060
    Oisin

    Thanks Leo, but I think that’s the wrong page. I’m only seeing it on the page url attached

    #1456061
    Leo
    Staff
    Customer Support

    Think I saw it on the other page too.

    The layouts are quite similar.

    Any chance you can try removing that section temporarily?

    #1456072
    Oisin

    Yes, it seems to be that block. I wonder where the negative margin coming from?

    #1456271
    Leo
    Staff
    Customer Support

    Looks like it was from the grid wrapper.

    Can you check and let me know? Happy to do a check too if you provide the login info 🙂

    #1456424
    Oisin

    Hi Leo,

    I’m not seeing anything in the block settings. If you could have a quick look that would be great.

    Thanks,

    Oisín.

    #1456568
    David
    Staff
    Customer Support

    Hi there,

    it is the image in the Hero element that is the issue. Its overflowing the container.
    I see you have this CSS:

    /*Reduce Mobile Hero Image Size*/
    @media (max-width: 769px) {
        .gb-container .wp-block-image img {
            max-width: 180px;
        }
    }

    You could further reduce the max width to stop that from happening. But you may want to introduce that within a smaller media query eg. 420px.

    Alternatively select the Grid Container the image is in, and add an Additional CSS Class ( in Settings > Advanced ) of: no-x-overflow

    Then add this CSS:

    .no-x-overflow {
        overflow-x: hidden;
    }
    #1458731
    Oisin

    Thanks David,

    I changed the CSS to:

    /*Reduce Mobile Hero Image Size*/

    @media
    (max-width: 420px) {
    .gb-container .wp-block-image img {
    max-width: 120px;
    }
    }

    But it made the gap bigger for some reason. I can add the overflow CSS but would like to get the above CSS working correctly if possible.

    Is there something else I should change about it?

    Kind regards,

    Oisín.

    #1458739
    Leo
    Staff
    Customer Support

    Is the CSS still added?

    Just view the site and no longer seeing the issue.

    #1465590
    Oisin

    Hi Leo,

    I added the no overflow CSS and reduced the size of the .svg and now things seem to look perfect.

    Thanks for your help.

    Kind regards,

    Oisin.

    #1465650
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.