- This topic has 11 replies, 3 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 23, 2020 at 1:38 pm #1456039Oisin
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.
September 23, 2020 at 1:54 pm #1456054LeoStaffCustomer SupportHi 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/pK1g9tBEzSeptember 23, 2020 at 1:57 pm #1456060OisinThanks Leo, but I think that’s the wrong page. I’m only seeing it on the page url attached
September 23, 2020 at 1:59 pm #1456061LeoStaffCustomer SupportThink I saw it on the other page too.
The layouts are quite similar.
Any chance you can try removing that section temporarily?
September 23, 2020 at 2:11 pm #1456072OisinYes, it seems to be that block. I wonder where the negative margin coming from?
September 23, 2020 at 7:31 pm #1456271LeoStaffCustomer SupportLooks 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 🙂
September 24, 2020 at 12:17 am #1456424OisinHi Leo,
I’m not seeing anything in the block settings. If you could have a quick look that would be great.
Thanks,
Oisín.
September 24, 2020 at 2:27 am #1456568DavidStaffCustomer SupportHi 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; }
September 25, 2020 at 8:34 am #1458731OisinThanks 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.
September 25, 2020 at 8:37 am #1458739LeoStaffCustomer SupportIs the CSS still added?
Just view the site and no longer seeing the issue.
September 30, 2020 at 8:43 am #1465590OisinHi 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.
September 30, 2020 at 9:31 am #1465650LeoStaffCustomer SupportGlad to hear 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.