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
Eric Pan
13,398 PointsHow to write nav CSS for implementing media queries?
In the episode Implementing Media Queries from Build a Responsive Website, the instructor pastes in some CSS code at 3:40 and I don't understand how she came up with all that code.
Did I miss something or am I not understanding how to use this technique? How does she figure out how many percent to make the width of each li? Is it just trial and error?
3 Answers
James Barnett
39,199 Points@Eric - I think it's just trial-and-error. There are few tools you can use to make this easier.
Use responsivepx.com to help figure out break points and a browser extension like MeasureIt! to get the dimensions of an element.
After you've got the size in pixels you can convert them to percentages, if you want.
Once you've decided on your percentages you can try out your markup using The Responsinator
Eric Pan
13,398 PointsThanks for your reply, James. So you're saying I should find a break point with responsivepx and then size the elements in px as I'd want them to look, then convert it to percentages based on the viewport size if desired?
James Barnett
39,199 Points@Eric - A lot of responsive design is guesstimating, so take a guess see how looks, double check it via responsivepx & responsiator. Repeat as needed.
My patented 3 step process for designing in the browser:
- Guess
- Check
- Iteriate