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
kevinardo
Treehouse Project ReviewerDesigning 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
Michael Richards
Courses Plus Student 1,681 Pointsit 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.
Riley Hilliard
Courses Plus Student 17,771 PointsIf 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
Treehouse Project ReviewerThx 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!