Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

kevinardo
seal-mask
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer

Designing full width pages while working with containers (960px grid for ex.)

Hi friends! My first post in this great community!

I am working with a project and i have been very confused about what approach to take when designing a page that i want to "extend my divs" that are inside my containers for bigger screens while still containing my 960 or 1000px container centered... i mean if i want to make use of a 1920screen but i dont want to have to use a 1920px container!

i really cant figure out what is the best practice to accomplish this. I have search and searched and there are so many different tips and tricks so now i want to turn to the community here for tips. Should i use divs outside of my container and adjust them to fit or is the common approach some jquery that i have missed? Or is it something with the widths and full width properties? I really would like to use the simple grid approach but it seems like i must dive into very complex frameworks and they come packed with pre written css and html etc, i would love to make a full width approach the treehouse e.g the smells like bakin webpage but say that i would want blocks of 200px height that stretches full width! And i cant find any good framework guides!

And also what videos here on Treehouse would you recommend strongly for this approach?

Thx alot and sorry for the misspelling and strange ways to express myself but i am a nordic noob :) Love to the best community and school i have ever studied on!

3 Answers

it sounds like you are looking for something fluid/responsive. i'd look over those courses.

http://teamtreehouse.com/library/websites/build-a-responsive-website is a good place to start.

If you are targeting larger resolutions and using a framework like bootstrap, optimizing the larger viewport would be the first step to take. If 1920px is the resolution, I would start by previewing the page in chrome at that resolution and slowly start writing new CSS rules to optimize the widths of things like the container, images, grid widths, etc in the chrome dev tools (also can be done in firebug w/ firefox)and place those changes into a new media query for that resolution. If bootstrap or any other framework does not cover that high of a resolution you will need to build/optimize it yourself. It might sound like a lot of work at first, but that is generally something that you should get used to in design/programming. (Spending a lot of time on something) As Michael Richards stated, your best bet is to go with the fluid bootstrap framework, but I would guess that you are still going to have to write some custom media queries. Scale the page, and when it breaks write a fix, save it into a media query, and continue onward.

kevinardo
seal-mask
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer

Thx alot for the heads up! This lead me to explore the zurb foundation and man did exploring frameworks do some wonder for my thinking!

Thx again, i will present my project here when its shaping up :)

Treehouse is the best!