-
At m40selfstorage.wpengine.com, I’m using the GeneratePress site template: Sider (https://generatepress.com/site-library/#sider). I added the CSS to my child theme from here: https://docs.generatepress.com/article/header-examples/#example-7. Unfortunately it appears the theme template doesn’t support the Full Width setting in the block editor. (I’m using the Full Width setting for the Cover and Map blocks.) When any block is set to Full Width, the browser adds horizontal scrollbars to the content area. Can you please update the Sider theme to support the block editor so that horizontal scrollbars do not appear when using the Full Width setting on a block? Thank you.
Screen grab of block editor: https://drive.google.com/file/d/1h2d5JW_68alYkwqwvt2kvVIxD6-gky_3/view?usp=share_link
-
Hi Mike,
For reference, can you provide the link to where you’ve added these Cover and Map blocks?
-
Hi there,
the Full Width option on the blocks is not smart, Full Width to it , means the full width of the viewport.
If you want to do Full width on the sider site it will require quite a few steps and using the GenerateBlocks plugin to create the layout
If you’re up for that, let me know
-
OK. Please show me how to do it. Thanks!
-
Ok, so in your Child Theme:
1. Remove this:
.no-sidebar:not(.archive):not(.blog) .inside-article > *, .no-sidebar:not(.archive):not(.blog) #comments, .no-sidebar:not(.archive):not(.blog) .paging-navigation { max-width: 700px; margin-left: auto; margin-right: auto; }2. this CSS:
body { padding: 0 50px 50px; margin-left: 330px; }remove the padding ie.
body { margin-left: 330px; }3. Then in the page editor set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
At this point the content should fill the width of the viewport minus the side header.
4. Build the page using GB Container Blocks for each section:
https://docs.generateblocks.com/article/container-overview/
Where you want to constrain the content width add an Inner Container and set is Max Width to suit.
Let me know
-
I made the CSS changes you noted.
In the page editor I set the Content Container to Full Width.
Next, your instructions say “At this point the content should fill the width of the viewport minus the side header.” Yes, the content fills the content width, by any block set to Full width is wider than the content, so horizontal sidebars are introduced.
With the Cover block width set at Full, the horizontal scrollbar is there. See it at https://m40selfstorage.wpengine.com/.
I tried putting all content, including the Cover block, inside a GB Container block, but no matter what the settings, when the Cover block, or the GB Container, is set to Full width the horizontal scrollbar appears.
It seems you are saying to not use the Full width setting on any block, but then how do I get the Cover block to fill the content area width?
I added temporary credentials into the private area if you want to try to edit the page.
Thank you for your support.
-
With the Cover block width set at Full
When the page’s content container is set to full width, you don’t need to set full alignment for containers, they are full width by default. So please disable that full-width alignment for all GB containers and all other blocks.
but then how do I get the Cover block to fill the content area width?
It should be full width by default, no specific alignment setting is required.
-
That’s it. Worked. Thanks!
-
No Problem, glad to help 🙂
- You must be logged in to reply to this topic.