Archived topic
Overflow issue
7 replies · Started by Ryan on March 18, 2021
I'm getting a slight horizontal overflow issue on some pages after the last update to GP Premium Alpha 5, it could have been previously but I didn't notice it. If I add overflow-x:hidden to the body the issue goes away. But I just can't seem to identify what element is causing this. It seems to be pages with a cover block like here https://www.ryansmithphotography.com/myrtle-beach-wedding-photography/ Can you take a look? Thanks.
Hi there,
The issue is coming from the alignfull cover block:
https://www.screencast.com/t/rdqFgB1aNxIT
WP uses a hacky way to make things full width.
The CSS fix is the best solution if you want to use core blocks only.
The better solution would be to use GenerateBlocks to replicate your current layout:
https://wordpress.org/plugins/generateblocks/
Thanks for the quick reply, I'd rather stick to the core blocks. They use an img for the background instead of a background image so it supports the srcset. What is your CSS fix recommendation for that?
The same one you mentioned in the original topic:
body {
overflow-x: hidden;
}Yes I got that, I'd rather actually fix the overflow though instead of just hiding it. I never noticed the issue until recently so I'm thinking it must be something with Generatepress and the cover block in particular. Is there some margin or something causing an issue? I just can't seem to pinpoint what is causing the overflow.
As mentioned above, WP uses a hacky way to make things full width.
I believe the issue would be fixed if you set the content container to full width:
https://docs.generatepress.com/article/content-container/#full-width
This option is required is generally required in order to have any full width content within the page.
But using that option would also set your other content to full width.
Okay, I wanted to keep it the way it is. I was just thinking you would want Generatepress to work correctly with all the Wordpress standard blocks and settings. Unless you are saying it's just a problem with this block with any theme. I will keep messing around with the css and see if I can correct the overflow.
Here are a couple of replies from Tom as well:
https://generatepress.com/forums/topic/does-generatepress-have-css-fixes-for-gutenberg/#post-1066714
https://generatepress.com/forums/topic/gp-blocks-shape-divider/#post-1337735
https://generatepress.com/forums/topic/gutenberg-full-width-blocks-e-g-image-cover-cause-horizontal-scroll-bar/#post-824741
