Using Theme Twenty Seventeen

I quite like this theme, may be over using it a bit.

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

To over come this and make the text area 80% of what ever 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 this look 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

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.