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.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
Hi,
It worked but now what happening is the spacing between about me box and the content box has increased. How to decrease that.?
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:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
