Using Theme Twenty Seventeen ~ Open Source Gathering

I quite like this theme, the Twenty Seventeen theme from WordPress.

Regardless, one thing I do not like about the Twenty Seventeen theme is that it is too narrow.

To overcome this and make the text area 80% of whatever device you are viewing from, go to Appearance -> Customize-> Additional CSS and add the following:

.wrap {
   max-width: 80%;
}

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

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
   max-width: 80%;
}

@media screen and (min-width: 30em) {
   .page-one-column .panel-content .wrap {
   max-width: 80%;
 }
}

Now we can see what the Twenty Seventeen theme looks like on an HD monitor.

This does not appear to do much with Post, and the following does help.

.wrap {
/* margin-left: auto; */
/* margin-right: auto; */
max-width: 80%;
/* padding-left: 2em; */
/* padding-right: 2em; */
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 80%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 80%;
}

@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 80%;
}
}

.has-sidebar #secondary {
width: 26% !important;
}

.site-info { display: none; }

Leave a Reply Cancel reply