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

Posted by Johny Cage
Johny Cage
1,492 Points

[Wordpress TwentyTwelve] full width header

Hello, I've setup a child theme for my wordpress powered website which uses twentytwelve as parent theme. I would want my header & nav-bar utilise full width stretching to end as per browser-window/screen width. It should follow fluid width when I put 100% as width parameter. But it restricts to 960px (or whatever set) the width of wrapper/ container for twentytwelve.

What is work-around for this? TwentyTwelve theme comes bundled with WP installation so finding it's CSS file would not be a problem. (still here's the source http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-content/themes/twentytwelve/style.css.source.html ) Here's the screenshot to demonstrate the idea..

https://dl.dropboxusercontent.com/u/71705548/screens/full%20width.PNG

Thank you.

6 Answers

Joakim Bergman
Joakim Bergman
14,501 Points
Joakim Bergman
Joakim Bergman
14,501 Points

Under the @media screen and (min-width: 600px) there is a max width of 960px for the class .site, max-width: 960px; and also max-width: 68.571428571rem; This might be the problem since the header is inside the .site div.

Johny Cage
Johny Cage
1,492 Points
Johny Cage
Johny Cage
1,492 Points

Yes, so what is the solution? Can guide me through?

Joakim Bergman
Joakim Bergman
14,501 Points
Joakim Bergman
Joakim Bergman
14,501 Points

I guess you could set the .site max-width to 100% as well as the header width, in order for the header to go full-width. Problem is that the parts below the header might also be affected by doing so, unless there is a width specified on those, since the .site div contains more than just the header.

Johny Cage
Johny Cage
1,492 Points
Johny Cage
Johny Cage
1,492 Points

Yes, exactly. Maybe I should separate div for header.

Johny Cage
Johny Cage
1,492 Points
Johny Cage
Johny Cage
1,492 Points

Also, what this theme makes responsive? I dont want to ruin the mobile-friendly /responsiveness design.

Joakim Bergman
Joakim Bergman
14,501 Points
Joakim Bergman
Joakim Bergman
14,501 Points

You could do a separate div for the header. But you could also just keep the width of the divs below at the right width.

It's the @media clauses that checks for screen width so that's where you put specific css for certain widths. This theme is mobile first so the first (and largest) part of the css is for screens smaller than 600px and the first @media is for screens between 600 and 960px and the last for screens wider than 960px. There is also a @media query for print.