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

[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

[Leo]

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.

[Ravi Dixit]

Okay thanks, I have combined them…

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

Thanks…

[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.

[Leo]

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 🙂

[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

[David]

Hi there,

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

[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…

[Leo]

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.

[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…

[Leo]

It should be:

body.page:not(.full-width-content) .site .inside-article {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

[Author]

Posts