Strange White Space Appeared Down the Right of Page on Mobile

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

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

Think I saw it on the other page too.

The layouts are quite similar.

Any chance you can try removing that section temporarily?

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

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 :)

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.

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;
}

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.

Is the CSS still added?

Just view the site and no longer seeing the issue.

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.

Glad to hear :)