Categories
WordPress

Increasing page width in the WordPress Theme Twenty Seventeen

As-per : https://www.vanilla-wp.org/twenty-seventeen-theme-full-width-wordpress/

You can increase the displayed page width in the Twenty Seventeen theme using the following “Additional CSS” (can be found under Customise > Additional CSS).

To modify the percentage of the screen that can be used change this percentage **only** – the other percentages affect padding/ borders etc and will affect how appears on smaller displays.

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

Full Additional  CSS to add to your site set to 70% width:

.wrap {
 /* margin-left: auto; */
 /* margin-right: auto; */
 max-width: 100%;
 /* padding-left: 2em; */
 /* padding-right: 2em; */
}
 
@media screen and (min-width: 48em) {
 .wrap {
 max-width: 70%;
 /* padding-left: 3em; */
 /* padding-right: 3em; */
 }
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
 /*margin-left: auto;*/
 /*margin-right: auto;*/
 max-width: 100%;
}

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

Leave a Reply

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