[Resolved] different container width for text on page

[Katharina]

my container width is 1050px, can I set a narrower width for my text on my pages?

Thanks
kati

[David]

Hi there,

the Layout Element allows you to set the Content width:

https://docs.generatepress.com/article/layout-element-overview/#content-1

[Katharina]

I did try it but whatever setting I use it contains the whole content.

I would like to keep the background images still full width and only contain the content.

[David]

With the Sections you have the option to set the Section to full width and the Inner Section contained which will respect the customizer > layout > container > container width.

Do you want to narrow the inner container on specific sections?

[Katharina]

with using the layout element
If I choose Full width or Contained there is no difference. Everything in the section area is at the width I set at Content width below it.

In this screenshot it’s set to Full width and 900px content width
https://paste.pics/05b60d624d6a8c571454615f45800c14

If I use content width in the customizer I get the issue with my testimonial section they are to narrow.
https://paste.pics/4bbf1e308fd3323c4bb6a1b1c4f0b9db

If the Layout Element doesn’t do the job I want, is there another way to have a different content width on chosen sections?

Thanks
Kati

[David]

So for the pages where you’re using sections you need to set the Page Builder container to Full Width.

Within the Sections themselves you have the inner section width which you should set to contained, this by default will respect the customizer container width.

To change this for a specific section you will need to use CSS:

1. Edit the Section on the Settings tab give it a CSS class e.g section-width-800
2. Add this CSS:

.section-width-800 .grid-container {
    max-width: 800px;
}

Then you just need to add the section-width-800 to any section you want to reduce its content width on.

[Katharina]

Thanks David, that’s what I wanted

[David]

Glad to be of help

[Author]

Posts