The default Twenty Seventeen content area and sidebar use less than the full width of the screen, especially on a laptop or computer screen. The total width of these combined areas can use the full width.
The default width of the content area and sidebar.
The content area and sidebar made full width of the screen.
The full-width appearance should work throughout the site (e.g. single pages, single post & blog archives).
Where and how to make the width the content and sidebar areas full screen:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
- The two lines of code created the full-width effect for both mobile and computer screens.
The CSS code:
.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: 100%;
/* 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