[Support request] How to make Post containers and Page containers same width?

Home Forums Support How to make Post containers and Page containers same width?

  • This topic has 10 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #970191
    Ravi Dixit

    I don’t know how it happened?

    My pages container width is 1441px and post containers width is 983px.

    I want to make all pages width same as posts except those I select full width in Page Builder Container.

    and I also want to show the same shadow on the left and right side as showing for posts.

    Thanks in advance

    #970256
    Leo
    Staff
    Customer Support

    Hi there,

    You have 2 blocks of CSS that are setting the post container width:
    https://www.screencast.com/t/YNMi3JNl
    https://www.screencast.com/t/YlcXcEwCQE

    I would recommend looking for your CSS first when you encounter weird issues like this.

    #970275
    Ravi Dixit

    Okay thanks, I have combined them…

    Can you provide me with the same CSS for Pages also?

    Thanks…

    #970282
    Ravi Dixit

    The first time, I create CSS myself:


    #page .inside-article {
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
    }

    But it is making all pages 900px width, I don’t want to make those pages for which I set full width.

    Please let me know what is wrong in this CSS.

    #970540
    Leo
    Staff
    Customer Support

    Instead of using CSS to set the container width, would you consider using the built-in option instead?
    https://docs.generatepress.com/article/layout-element-overview/#content-1

    Let me know 🙂

    #970707
    Ravi Dixit

    I can’t see any option there to set a custom width for specific pages.

    I am seeing something like this: https://docs.generatepress.com/wp-content/uploads/2017/03/page_builder_container_meta.png

    #970933
    David
    Staff
    Customer Support

    Hi there,

    go to the Appearance > Elements and create a new Layout Element – you will see the options available there.

    #998783
    Ravi Dixit

    Hello, David!

    Sorry for the late reply.

    I tried and as suggested, It is working fine also. But it is making all my page 900px width.

    I only want to show some pages except the pages I set full-width container for…

    I know I can do it by adding page rules manually for each page… But it will be tricky and I will have to add the same for new pages I will create in future.

    Please help…

    #998789
    Leo
    Staff
    Customer Support

    What if we try this CSS?

    body.page:not(.full-width-content) .site.grid-container {
        max-width: 900px;
    }

    This will set the static page that aren’t using full width container setting to 900px for container width.

    If this logic still doesn’t work you, then you will need to use the exclusion rule in the layout element.

    #998979
    Ravi Dixit

    It worked, Thanks LEO!

    Please help me to show left and right shadow as same as I am showing for a single Post container.

    Thanks for the help…

    #999256
    Leo
    Staff
    Customer Support

    It should be:

    body.page:not(.full-width-content) .site .inside-article {
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.