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
5 Answers
James Barnett
39,199 PointsHow many break points should a responsive site have?
As many as the design dictates. Look at where your design breaks down when you resize your browser and modify the design using media queries to fix the issues
Chad Shores
Courses Plus Student 8,868 PointsBefore you get started, make sure you have converted your fixed layout to a fluid one by changing pixels to ems or percentages. This will allow your content to scale to a certain extent with the browser window.
Install the Web Developer Toolbar extension for Firefox
View the site in question at your maximum resolution
Starting from the largest possible size that will fit on your screen, resize the browser and wait until one or more of the page elements starts to look strange.
On the Web Dev Toolbar, click the Resize button, the click Display window size in Title
Use a media query to change the CSS at or slightly before the width displayed in your browser's title bar to rearrange some elements in a more pleasing, adaptive manner.
Test in multiple browsers to make sure that there is no longer a breakpoint, then start resizing the browser again to an even smaller design to catch the next break point.
It is important to design new websites starting from a mobile version with only the most important content and features, and progressively enhancing each break point to contain the other content and features you have to offer.
Joel Rivera
29,401 PointsThank you, Is it better to use ems or percentages?
Aaron Martone
3,290 PointsIn my experience, ems are better suited for font sizing, whereas element dimensions (widths, margins, padding) are best with percentages.
An 'em' comes from font setting terminology that was the size of a font's capital 'M' (usually considered the largest character) As such, when an element is 1em, it is always the same size as its parent element.
Remember! ems inherit from font-sizes, not widths. Percentages can be used on both font-sizes and dimensions. If a div is 500px wide, and a <p> tag inside it is 16px (1em), then you can specify that a <span> in that <p> tag that you want to be 8px in size can be specified as 50% or 0.5em (I use the latter) Thing, is, if you use 50%, it's not inheriting from the <p> or <div>'s width of 500px.
James Barnett
39,199 Pointsems are better suited for font sizing, whereas element dimensions (widths, margins, padding) are best with percentages.
A big 