Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Isaac Russell
Isaac Russell
12,091 Points
Posted by Isaac Russell
Isaac Russell
12,091 Points

Wordpress & Bootstrap: Customizing home page

I would like to create various sections that cover the entire browser window with various background colors/images.

Example: Treehouse.com (homepage), http://www.nike.com/us/en_us/, http://twitter.github.com/bootstrap/index.html

However, I'm having trouble creating the divs that span the entire browser window. The theme I am using is located here:

http://www.johnparris.com/alienship/

And I'm trying to override the full-page template.

Example found here: http://www.johnparris.com/alienship/page-templates/full-width-template/

My website is located here http://dev.clearlycleanwindowwashing.com/

How can this be accomplished?

Any help would be greatly appreciated.

Thanks!

1 Answer

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi Isaac,

In general what you would do is have a class that spans the entire width of the screen then have a container inside of that the width you want your content (could be responsive).

So you would have something like this:

<div class="wrapper fullwidth">
    <div class="container">
        <h1></h1>
    </div>
</div>

<div class="wrapper">
    <div class="container">
        <h1> Main content</h1>
    </div>
</div>

What you would do then is set .wrapper to be 100% width, give .container a set width and centered it inside of the wrapper.

Then you can apply a background color or image to .fullwidth that will span the full width of the screen.

The trick here is that you will have to open and close a new wrapper class when you want to switch between full width and not.

There are some other ways to approach this design pattern, but hopefully this will work for you.

If you are started with an existing theme, you will likely need to modify their source code to accomplish what you're going for.

You might want to check out this tutorial from CSS girl

Hope this helps!