Change max columns width

.wrap controls the total width of the content column and the sidebar column. If you want to change the width of just the content column or just sidebar, then you’ll need to target different classes.

Anyhow, these are for .wrap:

Going by default, at screen width from 0 to 767px, you can use this:

.wrap {
  max-width: 720px; 
}

And once again going by default, at screen width above 767px, you will need to use this:

@media screen and (min-width: 48em) {
  .wrap {
    max-width: 1200px;
  }
}

Change the max-width number as needed.

• This reply was modified 7 years, 10 months ago by ThePixelMe. Reason: explained a bit about .wrap class
• This reply was modified 7 years, 10 months ago by ThePixelMe. Reason: removed duplicated words

Thanks, yeah well this do change the width but only for the blog pages. Thats great, but i wanted to change the “one column” width too and now i really don’t find the class to target.

Thanks !

In that case, could you please give us a link to your site so we can see what you’re trying to change?

https://beta.sorigkhang.fr/iattm-france/

Edit : isn’t it .site-main

• This reply was modified 7 years, 10 months ago by joola.

Saw your site, thanks. You can use this in combination with the codes I’ve provided earlier:

.single-post:not(.has-sidebar) #primary, 
.page.page-one-column:not(.twentyseventeen-front-page) #primary, 
.archive.page-one-column:not(.has-sidebar) .page-header, 
.archive.page-one-column:not(.has-sidebar) #primary {
  max-width: 100%;
}

This block of code makes it so that the .wrap code that I provided in the earlier post also controls the width of your site’s one-column layout.

• This reply was modified 7 years, 10 months ago by ThePixelMe. Reason: changed some words for clarification
• This reply was modified 7 years, 10 months ago by ThePixelMe. Reason: bolded important word

I love you !

That’s exactly what i needed ! So the entire website content width is better now !
Thanks for you’re help !

Hope this will help some others !

@joola No problem, glad to know that it worked out.

Before you leave though, could you please mark this topic as “resolved”?

Thank you very much!

Great solution. BUT… what If I want the twentyseventeen-front-page to ALSO be 100% in width. It seems that it will not be same width as the rest of my sites pages?

Thanks

Reopened the issue.

I wanted to thank ThePixelMe for providing the above solution and also wanted to ask one additional related question. I’d like to make the two column home page larger and this code from above worked:

.wrap {
  max-width: 720px; 
}
@media screen and (min-width: 48em) {
  .wrap {
    max-width: 1200px;
  }
}

But the sidebar is much wider than it needs to be. Is there a way to assign a percentage so that the main posts column is say 80% of the total width and the sidebar is the other 20%? Right now I’d guess its 60/40.

Sorry if this question should be a separate post but I figure anyone searching for an answer about making the home page columns wider will find this post and they’ll probably have the same question as me in regards to the post vs. sidebar percentages.

Here is the code to change the percentage of space taken by the blog page and his side bar :

.has-sidebar:not(.error404) #primary {
    width: 70%;
}

.has-sidebar #secondary {
    width: 30%;
}

Need to have 100% with both width !

And here for the 2 columns :

body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
    width: 30%;
}

.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
    width: 70%;
}

The problem is that if the header is to large it will stick to the page text. didn’t find out how to fix it but for now i guess you’ll find the fix !

Hope this is helpfull

• This reply was modified 7 years, 9 months ago by joola. Reason: Remove useless code

Hello. I used the Additional CSS code in the customizer. I pasted the following code:

.wrap {
max-width: 720px;
}
@media screen and (min-width: 48em) {
.wrap {
max-width: 1200px;
}
}

.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
max-width: 100%;
}

.has-sidebar:not(.error404) #primary {
width: 70%;
}

.has-sidebar #secondary {
width: 30%;
}

It doesn’t give the right spacing between the two columns. Did I do something wrong?

Blog here: https://YukonJen.com

Thank you for any thoughts or direction.
Jennifer

OK. I removed the last bit. I now have:

.wrap {
max-width: 720px;
}
@media screen and (min-width: 48em) {
.wrap {
max-width: 1200px;
}
}

.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
max-width: 100%;
}

I updgraded from the 2015 theme, where the pictures were 720 px. So, it looks better.

I find the sidebar a bit wide though. Is there any way I can reduce the width of the sidebar?

Am not too worried about it. I was just wondering. Thank you,
Jennifer

https://YukonJen.com
It looks better (720 is the width of the o

I find the sidebar a bit wide though. Is there any way I can reduce the width of the sidebar?

Yes i had this too and the side bar need to be reduced a bit !
Here is my CSS :

/*
Larger columns
*/

.wrap {
  max-width: 720px;
}

@media screen and (min-width: 48em) {
  .wrap {
    max-width: 1200px;
  }
}

/*
Larger blog columns
*/

.single-post:not(.has-sidebar) #primary, 
.page.page-one-column:not(.twentyseventeen-front-page) #primary, 
.archive.page-one-column:not(.has-sidebar) .page-header, 
.archive.page-one-column:not(.has-sidebar) #primary {
  max-width: 100%;
}

/*
Change percentage between the blog columns
*/

.has-sidebar:not(.error404) #primary {
  width: 70%;
}

.has-sidebar #secondary {
  width: 28%;
}

You need to ad the “Change percentage between the blog columns” part.
And removed 2 extra % to have more spacing between blog and sidebar.
Simply find the right % and you will get this done !

Jonas L.

• This reply was modified 7 years, 8 months ago by joola.
• This reply was modified 7 years, 8 months ago by joola.
• This reply was modified 7 years, 8 months ago by joola.

Wait something is wrong in my code :

I forgot to add the screen size parameter !

@media screen and (min-width: 48em) {
.has-sidebar:not(.error404) #primary {
  width: 70%;
}

.has-sidebar #secondary {
  width: 28%;
}
}