Make Content Narrower

[rarkmoberts]

Hey,

I am using Ethos stack.

I’m trying to make the content on my page narrower, about 620px wide. I understand I can change this from the options->layout and design and changing site max width to 620px.

However, this makes the entirety of my website feel “squashed”. In particular, I still want things like the navbar and footer to be wider, say 1180px or depending on the screen size. Also, I would like it to be a bit wider for the home page and to only be 620px on the content pages.

Hopefully this makes sense and this isn’t too difficult. Cheers.

[christopher]

HI Mark,

The correct approach for this is to have the widest content size that you need in the Theme Options.

Then please go to each page and use the Cornerstone settings button to make the page full width. Click the settings button at the left bottom of the screen while you are on the page using the Cornerstone:

A pop up will appear. Click the Page Settings tab and select the Blank - No Container, Header, Footer option:

Then add a section. In the section click the Row settings so that you can access the settings of the row:

Then click the Customize tab and click the Element CSS option and add teh code below:

$el {
  max-width: 500px !important;
}

Change 500px to whatever maximum width you like.

This way, you can control each row maximum width. For more information about the Element CSS feature please click here.

I know this is not an ideal way to have control over the maximum width for specific pages, but at the moment you have that only choice. Our development team is in the process of releasing teh layout builder which will ring the CSS Flex and Grid to the builder. Then you will have better control over such cases.

Click here for more information about the release roadmap of the X theme.

Thank you.

[rarkmoberts]

Hey, thanks for the reply.

Because I wrote my posts using WordPress’s visual editor, when I edit them using Cornerstone, all of the content is gone. Will I have to re-write the content using Cornerstone or is there something else I can do?

Also, when I click the Settings tab there is no option to select the page template to change to “Blank - No Container, Header, Footer”

[ruenel]

Hello Mark,

Because you are using the default WP editor, you can no longer set the maximum width as suggested by Christopher within Cornerstone. You will need to use a custom css instead. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .site .x-container.max.width.main {
    max-width: 620px;
}

And yes, when you click the settings tab, you will not see the page templates like the “Blank - No Container, Header, Footer” because it is only applicable to pages and not in posts.

Hope this helps. Please let us know how it goes.

[rarkmoberts]

Thank you!

Sorry, in my initial post I should have mentioned that this was for a post and not a page.

[ruenel]

Hi Mark,

The given custom css code in my previous response should resolve your issue.

Please let us know how it goes.