Help with page width

isa1978 · December 7, 2019, 10:42pm

hello guys,

you helped me with the post width with this code

.single-post .x-container.max.width.main {
max-width: 900px;

Which works perfect but I need it also for the page, can you please help?
thanks a lot
cheers
isabella

ruenel · December 8, 2019, 1:56am

Hello Isabella,

Thanks for writing in!

You can use this code if you want to include the pages as well:

.single-post .x-container.max.width.main,
.page .x-container.max.width.main {
  max-width: 900px;
}

We would love to know if this has worked for you. Thank you.

isa1978 · December 9, 2019, 5:23pm

@RueNel

Hello there thanks a lot.

It doesn’t seem to work on my end.

Can you check it, please?

Thanks a lot again
Cheers
isa

lely · December 10, 2019, 7:38am

Hi Isa,

The original CSS will not work because that page are using NO CONTAINER page template. Above CSS suggestion on the other hand are for the container of the page, which is missing on that specific page.

Note that you do have a fullwidth banner on top. If we adjust CSS to work on that page, it will look like this: https://screencast-o-matic.com/watch/cql6ivU9mN
See how it affects the width of the banner. I assume that you want to apply this width on the text content only below that banner with title? If yes, edit the page instead:

Inspect ROW that contains the text.
Set Global Container to OFF
Set maximum width for that specific row.

Hope this helps.

isa1978 · December 11, 2019, 5:35pm

Hello Lely,
thanks for your imput. But I don’t understand where I have to change the set up, from your screen shot, on the single page?

Thanks a lot for clarifying.
cheers
Isabella

ruenel · December 12, 2019, 1:36am

Hello Isabella,

Since you are using a Blank - Container page template, the custom css did not work for you. You can simply update the code and use this instead:

.single-post .x-container.max.width.main,
.page-template-template-blank-4 .x-main.full {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

This code will only affect pages using the Blank - No Container | Header, Footer page template.

isa1978 · December 13, 2019, 1:42pm

No @RueNel, @Lely Was right. If I do as you said. this is the result, see screenshot. I don’t want to reduce the header picture. that needs to stay of the same size.

Can you please help?
thanks

ruenel · December 14, 2019, 1:28am

Hello Isabella,

Since your image banner is added into section, your very first section actually, then @Lely’s solution will be the only way to resolve your issue. Simply edit your page and then you will have to set a maximum width for each row that you have added on the page. Having so many pages would take you forever in doing this solution. If you are sure that all of your first sections in all of your pages is fullwidth and does not use the global container or have been disabled, then the best css we can offer which will affect all pages will be this instead:

.page .x-section > .x-row.x-container.max.width {
    max-width: 900px;
}

We would love to know if this has worked for you. Thank you.

isa1978 · December 16, 2019, 2:42pm

@RueNel
The code you gave me didn’t work. unfortunately.

As to apply @Lely’s suggestions I don’t have many pages. I actually have only 2 o 3 now that I want to modify like that one. So I can definitely go and change it manually.

My only problem is that I didn’t understand the instruction and where I should find that SET UP in the screen shot.

Thanks for your help.

lely · December 17, 2019, 3:28am

Hi @isa1978,

Here’s a screencast on how to inspect ROW and set custom maximum width: https://screencast-o-matic.com/watch/cqlbetvi4b

Please do subscribe to our youtube channel and watch our videos. This will really help on your development.

isa1978 · December 20, 2019, 2:42pm

Hello Lely,

thanks a lot it worked! I didn’t know you guys had a youtube channel. I have just subscribed thanks a lot. cheers

On another note, I would like the post to be boxed with a white background as opposite to a gray background on the margin… like this in the screen shot. for example.

How do I do that?Is there a way I can change it in the setting so that I don’t have to go in each post or page? thanks a lot for your help.

ruenel · December 20, 2019, 11:57pm

Hello Isabella,

Your example screenshot is taken from “Keep Calm and Travel” site which uses Integrity. Your site is using Ethos. They have a different layout and styling. Do you want something like this?

If that is the case, then you will need to add this custom css code:

.single-post.x-full-width-active .x-container.main:not(.x-row):not(.x-grid):before {
    background-color: #e5e5e5;
}

.single-post .x-container.max.width.main {
    max-width: 900px;
    background-color: white;
    padding: 20px;
    border: solid 1px #e5e5e5;
}

Hope this helps.

isa1978 · December 21, 2019, 10:23am

@ruenel this is awesome thank you so much!!

It doesn’t work on the pages right? Is there a way I can do it manually in the pages where I want it?

thanks a lot

ruenel · December 21, 2019, 10:05pm

Hey Isabella,

To make it work in some of your pages, you can use this code:

.page.x-full-width-active .x-container.main:not(.x-row):not(.x-grid):before {
    background-color: #e5e5e5;
}

.page .x-container.max.width.main {
    max-width: 900px;
    background-color: white;
    padding: 20px;
    border: solid 1px #e5e5e5;
}

Regards.

isa1978 · December 23, 2019, 10:16am

Hello @RueNel
You are awesome! thanks a lot. But it doesn’t work. I have included in the CSS of the single page I want to change but nothing happens …

and Merry Christmas to you all!

rad · December 23, 2019, 11:56am

Hi Isabella,

Sorry about that and there is a typo error, please add spacing between the selector like this

.page .x-full-width-active .x-container.main:not(.x-row):not(.x-grid):before {
    background-color: #e5e5e5;
}

.page .x-container.max.width.main {
    max-width: 900px;
    background-color: white;
    padding: 20px;
    border: solid 1px #e5e5e5;
}

And or you can try this

.x-full-width-active .x-container.main:not(.x-row):not(.x-grid):before {
    background-color: #e5e5e5;
}

.x-container.max.width.main {
    max-width: 900px;
    background-color: white;
    padding: 20px;
    border: solid 1px #e5e5e5;
}

There is no need to add .page IF you’re adding it directly to a specific page.

Thanks!

isa1978 · December 28, 2019, 1:18pm

Hey there!
thanks a lot. It’s not working.

It’s not absolutely necessary, But It would be nice thanks

ruenel · December 28, 2019, 7:55pm

You are most welcome Isabella!

Happy New Year!!!

isa1978 · December 29, 2019, 11:09am

I was hoping in a solution, actually…

christian · December 29, 2019, 3:38pm

Hey Isabella,

Those codes do not apply to your page so please remove them.

-----------------------------------------------------------------------------------

To clarify, you’re using the New Row Layout system and that has the option to set the Row’s Max Width if the Global Container’s disabled. There is no need for custom CSS for this case. I will bring this up to my colleagues who provided custom codes here.

Please use the builder’s options going forward. You might think that it would be tedious to apply settings over and over again like if you want the section’s background to be gray and the row to white but we have new style copy features now. Please watch the video below:

-----------------------------------------------------------------------------------

Also, don’t forget about the Template Manager. With that, you will be able to save a page as template you can use over and over.

-----------------------------------------------------------------------------------

If you’re still confused, please give us WordPress admin access and I’ll setup a test page you can follow.

Thanks.