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

Home Forums Support [Resolved] How to change the width of the posts page

Home Forums Support How to change the width of the posts page

  • This topic has 7 replies, 2 voices, and was last updated 3 years ago by Roland.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #562681
    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

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #562807
    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

    #562858
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #562998
    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. πŸ™‚

    #563169
    Leo
    Staff
    Customer Support

    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;
    }
    #563556
    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

    #563720
    Leo
    Staff
    Customer Support

    For single posts I usually go with body.single for the beginning of the selector πŸ™‚

    #564068
    Roland

    Sincerest thanks.

    Also for the wonderful theme.

    Roland πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.