max width and content wrapper for Sparkling WordPress theme

Hi, is it possible to set the max width of the header, slider, content, and footer when the browser window is viewed on large screens. What i would like is the maximum width of 1170px and just background colour either side if its wider that that. I used to create a wrapper and set its max size, and nest all my content within it, but I’m quite new to wordpress and not sure of the div id’s To try target them.

Many thanks in advance


I guess you are thinking about so called boxed layout. Here is steps that you should take to limit width for header area:

Go to Appearance >> Editor >> header.php and add the following code:

<div class="container">

Right above this line of code which is already on that file:

<header id="masthead" class="site-header" role="banner">

Now you have to close this div and you can do that by adding a simple </div>

right after these lines of code on the same header.php file

<div class="top-section">
	<?php sparkling_featured_slider(); ?>
	<?php sparkling_call_for_action(); ?>

It is not an ideal solution and you will still have to slightly tweak overall theme layout and you can do that by adding this simple CSS to Appearance >> Theme Options >> Other >> Custom CSS

.main-content-inner.col-sm-12.col-md-8.pull-left {
    margin-left: -15px;