[Resolved] How can I create a page with a custom width?

[Michael]

I’d like to create a skinny page, content only, no sidebars, where the width is about 60% of the page rather than 100%.

I want this only for one page, not my entire website. Can you tell me step-by-step how to achieve this?

you can see the example in the URL I am providing to you. I just want to remove the sidebar on the right and center the content with the content remaining the same width.
thank you

[Leo]

Hi there,

A layout element should be what you are looking for:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Let me know if this helps 🙂

[Michael]

not really leo, I understand what you are saying but I have no idea how to set it up. Can you please give me instructions on how to set it up for a single page? Thank you

[Leo]

– Create a new Layout element.

– Click the Content tab and enter the desired content width:
https://docs.generatepress.com/article/layout-element-overview/#content-1

– Click the Display Rules tab and choose that single page where you want the narrow container to apply:
https://docs.generatepress.com/article/layout-element-overview/#display-rules

– Click Publish.

[Michael]

amazing! I figured it out, thank you.
Everything looks good however I would prefer to have more black background on the left and right than the huge amount of white space on the left and right. Is there any way to do that?
Thank you

[Leo]

Are you referring to the free music page you’ve linked?

[Michael]

actually no I set it up on a different page for testing.

[Leo]

Hmm that case remove the layout element and use this CSS instead:

body.page-id-2512 .site.grid-container {
    max-width: 650px;
}

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

[Michael]

thank you for that. Is there any kind of middle option or is it just one or the other? Now there seems to be too much black but if I make it larger then the text becomes too wide. Am I looking for a level of customization that is impossible? Thanks

[Leo]

So make sure you’ve removed the layout element, then you can just the max-width property from the CSS above, then balance with the padding:

body.page-id-2512.one-container .site-content {
    padding: 60px;
}

[Michael]

thanks but that’s actually affecting the height not the width. How do I affect the width with padding?

what I’m ideally trying to do is get a bit more white border on the left and right

[Leo]

padding: 60px; would change padding for all 4 sides.

Take a look at this for more info:
https://www.w3schools.com/css/css_padding.asp

[Michael]

I see that yes. So there is no way to just add padding on the left and right without affecting the top?

[Leo]

Yup – the link I provided above provides full explanation.

Or you can try this:
padding: 40px 80px;

[Michael]

thank you

[Author]

Posts