[Resolved] How to change the width of the posts page

[Roland]

Hi there,

how can i set the width of the posts page to 700px?

This is the posts page:
http://www.fuer-starter.de/blog/

I’m using Simple CSS. On the other pages of the website it works with this code:

#page {
    max-width: 700px;
}

On the posts page, even that doesn’t work:

body {
    color: blue;
}

#page {
    color: blue;
}

Roland

[Roland]

I think I got it.

Somehow the posts page behaves differently than the other pages. At least in case of CSS.

CSS does not work if you write it into the Simple CSS box on the posts page – I assume.

The same code however will work if you write it into the main CSS editor, which you achieve with Appearance > Simple CSS.

In my case this CSS works fine, if I write it into the main CSS editor:

.blog #page {
    max-width: 700px;
}

Could someone confirm that?

Another question:
If I’m right, wouldn’t it be a good idea not to show the Simple CSS box on the posts page?

Roland

[Leo]

Hi there,

Are you trying to set the width of the content only or the entire page including the header/footer?

The unique selector for the main blog page is in the body tag .blog

Let me know 🙂

[Roland]

Hi Leo,

I have been trying to set the width of the content only, the space between header and footer.

Finally I made it with this CSS

.blog #page {
    max-width: 700px;
}

as you can see here: http://www.fuer-starter.de/blog/

So I solved the problem for now. But I’m still wondering, why the same CSS doesn’t work if I type it into the Simple CSS box on the posts page?

Any reasons for that? Is it a bug?

It seems that any code written into the Simple CSS box on the posts page does not work. Is that true?

Roland 🙂

PS: Thanks for the unique selector .blog. To find that selector was half of my problem. 🙂

[Leo]

WordPress ignores all metabox values on index pages (blog, archive etc) by default which is why it isn’t working.

To change the content width, I’d go with this CSS:

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

[Roland]

Hi Leo,

thank you so much for the explanation why the metabox isn’t working on the posts page. That’s really helpful.

And thank you also for the correct CCS to address the content of the posts page. I put it in, works great. 🙂

May I ask you for another hint? If I want to change the width of all single posts (or want to change some other things on posts) – I use this CSS accordingly:

body.post-template-default .site.grid-container {
    max-width: 700px;
}

body.post-template-default p:first-child {
    color: #BD1220;
}

Example: http://www.fuer-starter.de/blog/hilfe-ich-brauche-eine-webseite/

It works, but is it the proper way?

Roland

[Leo]

For single posts I usually go with body.single for the beginning of the selector 🙂

[Roland]

Sincerest thanks.

Also for the wonderful theme.

Roland 🙂

[Author]

Posts