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%;
}
}

Well, thanks !

At least you secured the “main” OSM tiles and it fixes my problem !

That’s a really good plugin you made! Simple, and efficient.

Jonas L.

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.

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

Reopened the issue.

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 !

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

Edit : isn’t it .site-main

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

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 !