Page Container Layout for Page-builders

Hello @wpbluefox,
What page builder are you exactly using?

Elementor

Hey @wpbluefox,
We made this process a little bit easier, you don’t have to make the page full width but only the section you really want to be full width.

There is an option we added in Elementor that will help you make a certain section full width, please see this video – https://d.pr/v/EoDwy8

Hope this helps ??

P.S. Thank you very much for your review ??

Hello, thanks for reply!

I found it, it worked, but got another issue on the way:

I set Elementor Section to
Content – Boxed,
Width – 1920 px (my screen resolution, the content should take up the whole screen from left to right)
Columns Gap – No Gap.

The content in the Section does not stretch fully from left to right.
It stretches to about 1740 px,
Looks like something blocks width to 1740 px.

https://www.berrycast.com/conversations/055e802b-9251-5e39-9a63-9d074f5da16a

What do you think it could be?

That’s how Boxed option works.
If it is set to Boxed – it will take the maximum width of your website that is defined here – https://d.pr/v/WIhLUC

If you want to make the content area wider – simply make the section full width and adjust the Width option – https://d.pr/v/YRrJAG

Let me know if this helps.

Thanks for reply!

I do it exactly the same you show in your videos.

Wordpress Customizer:
General – Layout – Maximum Site Width – 1300px.
Elementor Section:
Full Width Section – Yes.
Content Width – Boxed.
Width – [value].
Columns Gap – No gap.

The thing is the width of the content in the Section can’t be bigger than 1730px.
Like in your video 2 I can change the width of the content in the Section.
The actual width of the content in front-end changes when width value is less than 1730px.
1730px, 1700px, 1600px, 1500px etc.

If width value is more than 1730px the width of the content won’t change, it will remain 1730px.

https://www.berrycast.com/conversations/2fd90cba-d970-556a-92ba-1ff22985f78e

Hi @wpbluefox,
I don’t really understand why would you make an inner container have such a big width, could you please explain a little bit more detailed your use case?

The idea here is that there are some calculations that prevent the content from being too big so it could look good in all devices.

But, if you want, you could rewrite that calculation with this custom CSS:

section.elementor-section.elementor-section-boxed > .elementor-container {
	width: 100% !important;
}

Let me know if this helps.

Hello,

The idea is we want the Section with picture in one Column to be full width.
The picture inside of the Column to touch the edge of the screen on resolutions equal or smaller than 1920px.

Resolutions wider than 1920px the Section to remain 1920px.

How can I apply your rule to only one Section?
https://prnt.sc/1u8wuk7

• This reply was modified 3 years, 1 month ago by Dmitry Bychenko.

Here is how to apply that CSS rule only to one section:
1. Add a class to your section – https://d.pr/v/nKIUfQ
2. Then add that clise like this:

section.my-custom-class.elementor-section.elementor-section-boxed > .elementor-container {
	width: 100% !important;
}

Hope this helps.