Archived topic
content gets hidden by vertical menu when screen is resized
10 replies · Started by Shari on May 16, 2021
My site looks perfect at full screen size but once I make the browser window smaller, the left portion of my main content gets covered by the vertical menu and the right content extends past the screen. Adjusting the container size and padding doesn't seem to affect anything. In css, I have the minimum size set to 1000 and a left-margin of 300 to accommodate the vertical menu.
Hi there,
theres a few issue to fix here.
First off DO NOT use the Full Width options on the Blocks - as this is going to force those blocks to be 100% full width, it won't know about the fixed sidebar.
Instead set the Content Container to Full Width.
https://docs.generatepress.com/article/content-container/
You can use a Layout Element if you want to apply that across the entire site or for all Post or pages for example:
https://docs.generatepress.com/article/layout-element-overview/
This will give you a full width page, that you can now define your spacing ( padding etc ) in the Block editor using the GB Container Block.
Once thats in place i can check the site for any overlap issues and provide CSS to fix.
I updated the three blocks to full width instead of centered and created a new element called fullwidth which I applied to the entire site and only has "full width" as its setting.
Hi Shari,
This section is causing the horizontal scroll, you could either remove it, or remove the alignfull class from it:
https://www.screencast.com/t/imi4l5qFw4
Let me know :)
I removed the section that was causing the horizontal scroll. Now I just need to have the main content extend the width of the screen without getting covered by the vertical menu!
I'd love for the content to extend the entire page and to be even wider than the footer and not show any of the background except at the top above the first block. Does that make sense?
Disable the CSS you added should do the job :)
https://www.screencast.com/t/UfdZ7ogMfP1
I deleted the css for no.sidebar and that did the trick! Thank you!
Great! You are welcome :)
Thank you so much
No problem :)
