[Resolved] Container Widths

Home Forums Support [Resolved] Container Widths

Home Forums Support Container Widths

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #500060
    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.

    #500302
    Leo
    Staff
    Customer Support

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

    body.single .grid-container {
        max-width: 1290px;
    }
    #500427
    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.

    #500719
    Leo
    Staff
    Customer Support

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

    #500977
    Janine

    Thank you, Leo.

    #501243
    Leo
    Staff
    Customer Support
    #502262
    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!

    #502264
    Janine

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

    #502368
    Leo
    Staff
    Customer Support

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

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

    Leo, that did the trick. Thank you!

    #502483
    Leo
    Staff
    Customer Support
Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.