Archived topic
Gutenberg Align Full + Off Canvas = No Horizontal Scroll Bars..Why?
1 reply · Started by Nick on February 10, 2022
Well here goes again on the second try (browser logged me out while writing). I'll keep it much more to the point this time. This is with both GP theme and GP Blocks Pro.
I like my content to vary in widths and sometimes have background images for entire rows. The old solution I would do is to set the page layout to full width and use generateblock containers for each "row". The "problem" with this is it completely ignores the theme customizer padding settings which I find helpful for smaller screens so text doesn't go all the way to the edge. The solution of course would be for me to bring back the default padding that generateblocks used to apply via a php function (I have modified the defaults before) or set up a global style in the pro settings. If there is another way I could do this let me know but I came up with a workaround of sorts.
The solution I had came up with that I did on my last site was to not put all the content in containers and instead let the theme customizer control a global width/padding and use the gutenberg alignment setting. For example:
1. I create a page with the contained width layout of 1200px as set via the theme customizer settings.
2. I add a few blocks such as some text, headlines, galleries, and a grid.
3. I now come to a point where I want to have a content area with a background image and want the background to be full width (edge to edge of the screen)
4. I add a container block, set the background image, set the container to full width and inner container to contained width of 1200px.
5. I then set the Gutenberg alignment toolbar setting to full width.
This method worked fine on my last website, however today I noticed a horizontal scrollbar on the bottom of my screen. I searched around the support forums and noticed this topic. It mentions a few work arounds, but I hadn't done any of which on the last site.
After comparing the customizer settings side by side I noticed I hadn't enabled the off canvas panel yet. I personally always use the off canvas panel and just hadn't turned it on yet. Once I did, ta da! No more scroll bar.
The Concern
What exactly is causing this "fix"? Is it just as simple as the off canvas panel is adding an overflow-x:hidden to the css or is there something else going on? Also in your opinions is this a bad solution in terms of browser combability or it breaking in future updates of GP theme/blocks?
Hi Nick,
I like my content to vary in widths and sometimes have background images for entire rows. The old solution I would do is to set the page layout to full width and use generateblock containers for each “row”. The “problem” with this is it completely ignores the theme customizer padding settings which I find helpful for smaller screens so text doesn’t go all the way to the edge. The solution of course would be for me to bring back the default padding that generateblocks used to apply via a php function (I have modified the defaults before) or set up a global style in the pro settings. If there is another way I could do this let me know but I came up with a workaround of sorts.
If it's about just re-adding the paddings on mobile:
You can keep the layout you did w/ GB. We can just re-add this with a few lines of custom CSS. Let us know if this is the case so we can do the CSS write-up for you. :)
Usually, something like this would suffice:
@media (max-width: 768px) {
.site-content, .inside-article {
padding: 40px !important;
}
}But you may have to modify the selector to remove , .inside-article if it's too much.
As for the horizontal scroll, that's usually when a content is overflowing.
And yeah, generally it's just a simple overflow-x: hidden; but the better approach may be to figure out exactly why the scrollbar appears in the first place.
If you can link us to a sample page w/ the issue, we can check it with you and see what can be done aside from doing overflow-x: hidden;. (Not saying overflow-x:hidden; is bad. but prevention is better than cure. ;) )
