[Resolved] Container Widths

[Janine]

Hi, Leo.

It seems that when I change the value in Layout > Container the same value is applied to both pages and posts alike.

I don’t understand this statement from the documentation on Container Width:

“You can set it to a percentage using CSS, however, I typically recommend choosing a really high pixel value like 2000 if you’re looking for a 100% width website. Since GeneratePress is responsive, it will be 100% wide on most screens at that width.”

Right now my container width is 1,000.

How can I uniquely set the container width of my pages different to post pages?

Here’s a link to my demo site: http://6514e594.ngrok.io/

Thank you.

[Leo]

You can set the single posts container width with this CSS:

body.single .grid-container {
    max-width: 1290px;
}

[Janine]

Hi, Leo.

OK. But I am happy with the size of my container on my posts, but not my pages. On my pages it is a tad bit too wide.

Thank you.

[Leo]

I would recommend using the customizer to set what you want for pages, then use my CSS above to change it for posts.

[Janine]

Thank you, Leo.

[Leo]

No problem.

[Janine]

Hi, Leo.

I followed your instructions.

First, I change the container width in the customizer to 880px.

Then, I added this CSS rule:

/*set container width for posts*/
body.single .grid-container {
max-width: 1100px;
}

Now, the content area widths are within range of where I want them, BUT how the posts are displayed on the homepage also got narrower.

I am using a masonry grid with a featured post. And each grid becomes too narrow for my liking.

Link to my demo site: http://2e82c437.ngrok.io/

How can I fix this?

Thank you!

[Janine]

I am trying to achieve a max width of 800px for my images and web pages. Thank you!

[Leo]

You can set a different container width for the main blog page with this CSS:

body.blog .grid-container {
    max-width: 1100px;
}

[Janine]

Leo, that did the trick. Thank you!

[Leo]

No problem!

[Author]

Posts