[Resolved] Set width of page with sections

[Rutger]

Hi there,

It’s probably answered before, but I can’t find the answer.

I want to make the text sections in a page made with sections smaller, 800 px or something. I tried all the CSS-scripts on the forum, but I can’t make it work. The scripts do work on normal pages though and I’m using Simple CSS. Am I missing something?

Thanks in advance!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Rutger]

It’s a local site unfortunately. I was making the section page just like in the Vimeo video. I like the result, but I don’t like the width of the text. So I wanted to change that with a little CSS, but it didn’t work. One script did though, something with ‘section-1 width’. But I didn’t save that one.

[Leo]

Just to make sure, you want to change the container width of all pages with sections enabled?

Or just a specific section? or a specific page with sections enabled?

[Rutger]

Hi Leo, just for the text on the page. But I think I finally found the solution in this thread:

https://generatepress.com/forums/topic/container-width-4/

When I put the text in the

the CSS-code responds.

[Rutger]

P.S. “Just to make sure, you want to change the container width of all pages with sections enabled?”

That would be even better. But just for the text. I want the text section to be small, to make it more easy to read. Background images may be full width. So the same page as in the video, but with the text width smaller.

[Leo]

Let’s try this solution:

– Add section-text custom class to the text sections:
https://docs.generatepress.com/article/sections-overview/#layout

– Then use this CSS:

.generate-sections-container.section-text .grid-container {
    max-width: 700px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Rutger]

Thank you Leo, it works perfectly 👍

[Leo]

No problem 🙂

[Author]

Posts