I recently downloaded the Roots starters theme from http://www.roots.io/.
I love the fact it supports Bootstrap’s 3 grid system as I worked a few times for several clients. Now the problem I’m facing when using the Roots theme is that all of the content is wrapped in a container (See the code below). The code is from the base.php file.
<div class="wrap container" role="document">
<div class="content row">
...
<?php include roots_template_path(); ?>
...
</div><!-- /.content -->
</div><!-- /.wrap -->
So, the container and content classes do center all of the content, Even if I make my own template file, It’ll always center the content at the middle of the screen.
Now I found a solution (CSS hack) for this that’s quite simple but I don’t realy know if it is acceptable, although it works in Chrome. When I login to my Wordpress account and edit a page I inserted the following:
<section class="first">
...content...
</section>
And my CSS looks like this: (Give it a full colored background screen width)
html, body{
overflow-x:hidden;
}
section.first{
background-color:red;
margin:0 -500em;
padding:0 500em;
}
Within the Wordpress text-editor the content is now split into different sections. With the use of CSS I now can give different sections another color wich expands to the full width of the screen. This is what I wanted to achieve. But is this a good solution or may it be more trouble in the future?