Last updated on June 26th, 2022 at 11:41 am
Changing the width of Twenty Seventeen’s content section is a 3 level process that includes changing the width of the theme’s wrapper, changing the width of the left content section and modifying the width of the right sidebar section.
Let’s see how to do this.
Change Twenty Seventeen 2017 theme’s content section by increasing or decreasing its wrapper width
1. Go to your WP Dashboard > Appearance > Customize > Additional CSS and paste the following code in Additional CSS there.
.wrap {
max-width: 1200px;
padding-left: 2em;
padding-right: 2em;
}
By using this code snippet you can make your post’s content wider or narrower depending on the numbers you put for padding-left and padding-right.
Modify Twenty Seventeen’s left content section by increasing or decreasing its width
To align the content section width even further, you will need to add the another code snippet for modifying Twenty Seventeen’s left content section width.
2. Paste the following code in Additional CSS and click on the Save & Publish button to check the results.
#primary {
width: 80% !important;
}
For optimal results, I used 70-80% for width. Feel free to set your own value for the width option in the code.
However, at this point your site will not look good if you’re using a sidebar. To correct this, do the following.
Change Twenty Seventeen’s right sidebar section by increasing or decreasing its width
3. Paste the following code snippet that follows in the Additional CSS section and click on the Save & Publish button.
.has-sidebar #secondary {
width: 20% !important;
}
Now you should have the following three blocks of code in your Additional CSS section.
Once you save the changes, check the results by refreshing your homepage.
If you’re not happy with the results, try to change the width values until you find the right values for you.
