How to make a page template that is truly full-width

Hi,

The width of the entire site is governed by this style:

.col-full {
max-width: 65.141em;
}

If you want it to be totally full width you’ll have to change that value to something else.

Thanks.

Hello Jameskoster, thanks for taking the time to reply!

I discovered that this will do what I want through trial and error. However, it is also affecting the main navigation menu (stretching it to full width, which looks awkward). I would like the main menu to remain about 65em wide, but it appears that the col-full class is a parent class.

Here is what I have in my child theme’s style.css now, it does not work for holdinig the site-header to 65em though.

.page-id-128 .col-full{
max-width: 100%;
margin-left: auto;
margin-right: auto; }

.page-id-128 .site-header {
max-width: 65.141em;
}

Any advice? I was looking at using a :not() in the first string to try to exclude site-header and all that stuff, but that did not work either.

Thank you!

Hey,

If you only want this to apply to your main site content, and not the header/footer then try:

.site-content .col-full {
max-width: 100%;
}

Thanks

Jameskoster,

Thank you! This worked perfectly.

It appears that the order of the classes is used to specify what must be changed, and does not need to be listed in hierarchical order?

Thanks again!

Is there a way for me to assign this to a specific page-template? Right now I am using:

.page-id-128 .site-content .col-full {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

But it would be nice if I didn’t need the .page-id in the actual css, if I could point it to .template-true-full-width (a template I created and put into my child theme) that would be awesome for the creation of future pages.

Thank you!

Duplicate post.

Hey,

Yep, you’ll be able to do that. Just view the source of your page and you’ll find a unique class added to your body tag.

Thanks