[Resolved] Single-column + center pages option CSS

[JC]

Hi. I’m trying to create a simple option for centering a page when I remove the sidebar and select the Content (no sidebars) option.

I know it’s a few changes in the CSS, but I’m not sure what divs to select.

For admins, I gave a link to a page I’d like to center and make the column width something like 70-80% so it’s not spanning the entire 1100 pixels wide.

sidebar options: https://imgur.com/5g2QHUt

[Leo]

Hi there,

What if we do something like this?

body.no-sidebar .site {
    text-align: center;
}

Let me know 🙂

[JC]

Sorry, that was bad wording on my part. I’m not trying to center a page. I’m trying to narrow the content area so it’s not spread so far across the screen.

I just made some changes in the CSS to show you what I’m trying to do, but they’re not correct because it doesn’t work well on mobile… so I’m probably not selecting the right div to make changes to.

page for reference: https://jcdfitness.com/online-personal-trainer/ and then screenshot to see how it looks after I made the changes: https://imgur.com/WxXLJbk // you’ll notice the CSS changes I made.

[Leo]

Would this option help?
https://docs.generatepress.com/article/layout-element-overview/#content-1

You can set a specific width starting in 1.8.

[JC]

hmmm, looks like it would be handy, but when I go to create a new Layout element and select the container area (it’s no longer content), you can’t specify a width.

[JC]

the more I look at the example, the more I think that the screenshot is old and the width function is no longer available?

[JC]

actually, scratch that. I had to update my plugin… I wasn’t aware there was an update. SOLVED!

[Leo]

Awesome.

Make sure to check out all the new features here:
https://generatepress.com/gp-premium-1-8/

[Author]

Posts