Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] How to create different site widths for pages and blog posts?

Home Forums Support [Resolved] How to create different site widths for pages and blog posts?

Home Forums Support How to create different site widths for pages and blog posts?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #476080
    Cecilia

    Hi!
    First of all, thanks for a great theme and plugin!

    I’m trying to figure out how to create the design I want.
    I have looked through the documentation and forum but I have not found the answer.

    What I want to do is this:
    1.
    I want the default page width to be 1100px.
    Cuztomize > Layout > Container > Container width – check.
    https://docs.generatepress.com/article/container-width/

    When opening a blog post I would like the content to be 700px to increase readability.

    If I add 200px padding left and right for content, it affects the whole site, making my 1100px-site narrow down to 700px.
    https://docs.generatepress.com/article/content-padding/

    2.
    Also, I wonder if it’s possible to affect the blog archive page to show for example a signup form at the very top of the page. I tried the sections plugin but I didn’t manage to make it work. Perhaps it’s not possible due to standard functionality in WordPress?

    /Cecilia

    PS My site is under construction, so you will not be able to see it. Let me know if you need to, and I’ll let you in.

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #476237
    Leo
    Staff
    Customer Support
    #476245
    Cecilia

    Thanks!
    I don’t really “use” container/one container in that sense since I’m still playing around trying to figure things out, so I’m flexible. I’ve tried both. Is one to prefer over the other, considering what I want to do?

    Thanks for the links, I’ll check it out.

    /Cecilia

    #476432
    Cecilia

    I’ve looked into hooks but I don’t quite see how to do what I want.

    I would like single blog posts to have a container width of 700px.
    Other pages to be 850px.

    Content width is set to 850px.
    Content layout is set to separate containers.
    What can I add with hooks making the content width for posts to be max 700px?

    /Cecilia

    #476632
    Leo
    Staff
    Customer Support

    This CSS should work to make the single posts 700px in width:

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

    Hooks is for your second question to add the signup form as you labeled.

    #476743
    Cecilia

    Ah, ok. I see. Sorry for the mixup.
    Thank you!

    #477008
    Leo
    Staff
    Customer Support
    #791414
    Uwe

    Hey, I just tried this but, for some reason, it also changes the width of the menu to 700px which is something I don’t want.

    Do you know how I can fix this?

    #791534
    Leo
    Staff
    Customer Support

    Try this instead:

    body.single .site.grid-container {
        max-width: 700px;
    }
    #791684
    Uwe

    It worked, thanks!

    #791697
    Uwe

    Just one more question on this topic: How can I only apply the 700px width to posts that don’t have a sidebar?

    #791821
    David
    Staff
    Customer Support

    Hi there,

    update the CSS to this:

    body.single.no-sidebar .site.grid-container {
        max-width: 700px;
    }
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.