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
Jason Bean
3,490 PointsContent full browsers with
Hello Everyone,
Does anyone know of a good tutorial on creating a webpage that has the main content area expand the full width of the browser?
Something like this site: http://themes.wopethemes.com/?theme=leader
I greatly appreciate any feedback. Thanks.
3 Answers
Dave Evans
13,160 PointsIt's just using percentages in your CSS. By creating percentage based widths you can create a fluid and flexable webpage. However, the only content that is full page on that site would be the slideshow top. If you inspect the CSS on the page, the .content-column1 has a width of 100%. The other content on the page has a max-width of 1120px but they use some media queries to adjust the width of the content depending on your screen size. Check out their responsive.css file to see what they are using.
Matthew Reed
Courses Plus Student 17,986 Pointshttp://css-tricks.com/perfect-full-page-background-image/ This might help.
Although I don't know if you need a tutorial for that. Just do
width: 100%;
for anything you want to be full width
Jason Bean
3,490 PointsGot it! Thanks again for your time.
Dave Evans
13,160 PointsNo problem. Hope it helped.
Jason Bean
3,490 PointsJason Bean
3,490 PointsThanks for the feedback, so if I built my site on a grid that has a container with a max-with:1000px (100%). How would I make the top slideshow have its own max-width be the full browser width. Wouldn't the container restrict it?
Sorry, I'm sure I'm making this more confusing than it has to be.
This is my new homepage that I'm slowly building: http://jbeanmedia.com/1JbeanMedia/index.html
I'd like to eventually make a full width slider.
Dave Evans
13,160 PointsDave Evans
13,160 PointsYou don't include the container class on that slideshow. So, you would have your top nav in the container, then your slideshow full width, then your content in the container. Tweak some CSS styling so that it all fits together and your on your way.