-
I have a GenerateBlocks container with full width layout with an inner container created through ‘add inner container’ button. However I am having an issue where the inner container doesn’t seem to be abiding by the site’s content width (eg. 50px padding on desktop). It never quite lines up with the .site-content padding. When I inspect element, it shows the generate block container actually exceeding the width of the browser window (see this image).
Can you help me debug this? I’ve attached the page in question in the private information section.
-
Hi there,
theres 2 issues here, if we can fix the latter ie. the overflow first:
If thats Chrome on PC – then that issue will rise from using the core Full Width options.
That method uses CSS to force a container to fill the width of the browser. But PCs place their scrollbars inside the browser window which takes up space and can lead to overflow.To stop that from happening we recommend to NOT user the Full Width options and instead set the page Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
Let us know, we can then look at the alignment issue.
-
The entirety of my website uses contained pages. If I understand correctly, I’d then have to use a container on this page with the same padding as the contained page uses? To make the page match the rest of my site.
I don’t love making individual page changes and moving away from being able to control things on a sitewide level. This makes me want to just avoid using generateblocks to be honest.
-
Its not related to GenerateBlocks, its related to a) how WP implemented wide / full width options and b) the way GeneratePress sets its container widths.
WP decided in its more recent core themes that EVERYTHING added to the page would have a
max-widthset. And by choosing the Full Width option it would remove that width.Traditional themes like GeneratePress always used a fixed container width that your content sat inside.
And to overcome that GP provided the option to make the Content Container full width.To make it match the rest of your site.
You would need to add Padding to the Container Blocks, and you can set the Max Width of the Container or Inner Container using the Global Max Width property:https://docs.generateblocks.com/article/sizing-options-overview/#max-width
That width will use the GP container width set in the Customizer.
-
Yes that is what I tried to do. I am using Global Max Width on the inner container, margin:auto, and set padding to match the padding set sitewide on the inner container. But the GenerateBlocks still isn’t lining up with the rest of the content properly. Because of the overflow, which only seems to be happening with GenerateBlocks (whatever the root cause is)…
-
what’s not lining up? This is what i see:
https://app.screencast.com/OdnR9Z5teRbCQLet me know 🙂
-
Look at my screenshot or use different window sizes and you will see.
-
I’ve been trying to find the issue where the content isn’t lining up but couldn’t locate it. I’ve tested with multiple breakpoint views, and everything seems to line up perfectly. The only screenshot you provided earlier was before the fix was implemented, right?
Could you please point out exactly where to see this issue?
-
I have not implemented any fix or any of the above…
-
The
alignfulloption is causing the issue. Please see this reply here: https://generate.support/topic/submenu-disappears-on-hover/#post-108127This is where you would find the Block Alignment option: https://www.screencast.com/t/V3Y0dWEjRywi
Make sure to always select Default.
-
It needs to be aligned full so the background extends to the edge of the window… that is selected on purpose.
I think this is the same as David’s solution. The implication is that for every page that uses GenerateBlocks I have to set page specific layout. I don’t really like that as a solution as if I ever change the content padding I am going to have to update a lot of pages manually.
I think I’ve resolved to either accept the misalignment of GenerateBlocks containers on some pages or not use the containers at all.
Appreciate the suggestions.
-
Did you try using the Full Width Content Container option I mentioned in the linked post above?
That is the correct way to do it if you want to fix the issue you mentioned in this topic.
-
See my edited response above.
-
The implication is that for every page that uses GenerateBlocks I have to set page specific layout.
You can create a Layout element to set this on multiple pages:
https://docs.generatepress.com/article/layout-element-overview/
https://docs.generatepress.com/article/layout-element-overview/#content-1I don’t really like that as a solution as if I ever change the content padding I am going to have to update a lot of pages manually.
Looks like you have GB pro so the Global style would be handy for this:
https://docs.generateblocks.com/article/creating-a-global-style/
https://docs.generateblocks.com/article/editing-a-global-style/ -
Thanks. I duplicated the page and designed it using the full width. I was able to resolve the alignment issues.
I’ll be honest though it seems overly convoluted for what I am usually trying to do with GenerateBlocks. It seems like I should either be using GenerateBlocks for all my site design or none, but instead for my use case where I use it relatively infrequently, I need to hack together custom styles and elements to make pages designed this way match the rest of the site. It took way longer to design this page then it did the first version.
Eg. I wanted to have one section on the page full width. Now instead I had to put every block on the page inside a container, add layout elements, and global styles or styles that match. Even the global styles just seem like a convoluted way of making a CSS class in style.css and adding it to your block.
Reservations about GB aside, thank you all for help with this. I was able to achieve what I needed.
-
No problem 🙂
Let me know if you need more help.
- The topic ‘CSS Sizing Issue with GenerateBlocks’ is closed to new replies.