How to change the width of the theme

Currently I see it is optimized to view in all screen sizes and the theme is responsive. But when I see this theme on 16:9 resolution 15.6 inch screen, I see lot of spaces on both the corners of the width of the theme.Is there anyway to increase the width and also keep the theme responsive?

I took a look at the theme’s stylesheet and I see this CSS restricting the layout’s width:

.site {
margin: 0 auto;
max-width: 60em;
}

You can try increasing that default width if you like by copying this into a child theme or custom CSS, adjusting the number of ems as you like:

.site {
margin: 0 auto;
max-width: 80em;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

Right – what you’ve done is increased the overall page width, but the sidebar and main column widths are the same as they were before. If you want to increase the column widths you’ll need to decide how you want them to be displayed at various screen sizes to preserve the responsive design – you may want to wrap the width increase in a media query, for example. This will require some understanding about how media queries work.

You can learn more about using media queries that target certain screen sizes here: