[Support request] One and two column layout width question

[John]

I use a single and two column layout (content and right sidebar) for my home and blog pages. The overall width layout is 1080 px and is defined in the layout -> container area.

I want specific pages and blog posts to have a one column width BUT much smaller width than what’s defined in the layout -> content area. I am currently handling this in CSS by page ID. see example below.

This does not scale well if I want to do it for many pages. Any ideas on how I can accomplish this?

/* one column page for challenge */
body.no-sidebar #page.grid-container #post-4128 {
max-width: 725px;
margin-left: auto;
margin-right: auto;
}

[Leo]

Hi there,

There needs to be some sort of logic in order to add the CSS per page basis.

What if we just target the pages without a sidebar like this?

body.no-sidebar .site.grid-container {
    max-width: 800px;
}

Let me know 🙂

[Author]

Posts