Archived topic
Full-width containers when having custom post width
9 replies · Started by Ravi Dixit on December 17, 2021
Hello, GeneratePress team!
I was using Elementor for designing custom pages and post for my website but planning to shift to GenerateBlocks completely.
But I am struggling with some points, like how to make a container full-width when I have custom width for my single posts through CSS. Using the below code for this:
.single:not(.full-width-content) .inside-article, .single:not(.full-width-content) .comments-area {
max-width: 800px;
margin: 0 auto;Have a look at this image: https://prnt.sc/23dv8vo I want to make that highlighted section full-width and keep the single post width the same. Here is the container settings screenshot https://prnt.sc/23dvjx3
What's the solution for that?
Hi there,
You can use Block editor's alignment setting as shown here - https://share.getcloudapp.com/qGur006Y
Setting to full width should stretch the container to the full page width, assuming there's no sidebar. :)
Oh, how easy it was... I tried everything but did not get this...
Now what about the gird added inside the container, I don't want it to be full-widget as the container. Is the padding the only option to do so or anything else is available. https://prnt.sc/23eyy1i
Hi there,
select the full width GB Container Block. In the Layout setting set the Inner Container to Contained Width and set the Width you require:
Hey, David!
Thanks for your help, I am shifting to GenerateBlocks so trying my hands on it.
Thanks again for your fast support as always.
Glad we could be of help!!
Hey, David!
I am getting an issue when using the full-width container on a page or post. Check this https://prnt.sc/26d2y3e There is a horizontal scroll bar is showing at the bottom of the page.
How can I get rid of that?
That's a sign of content overflow.
The quick solution is by adding this CSS:
html, body {
overflow-x: hidden;
}but it's best to fix the cause of horizontal overflow first.
If you can link us to this exact page, we can help you find out which section is causing the issue.
Sorry for the delay, the same issue is showing in the page I shared the link. Please help in fixing
Hi there,
if you want to create Full Width layouts then set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
Then build your page with GenerateBlocks Container Blocks - you won't need to set them to Full Width.
This method will stop elements from overflowing.
