Bummer! You must be logged in to access this page.

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

CSS

Posted by Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

CSS: @media screen question

Hi,

when setting the min-width to 660px, is that the size of the device?

For example, the LG G3 Beat has 720 x 1280 pixels (~294 ppi pixel density). Does that mean, to add a breakpoint for the LG G3 Beat,I'd have to set the min-width to 294px?

A bit confused on the matter.

3 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Generally, you don't want media query breakpoints at exact device sizes.

Instead, the breakpoints should be at dimensions where the layout appearance and/or readability could be improved by making some changes.

This way, your pages will look good on current devices, and when new devices come out, you won't be scrambling to modify your code to accommodate them.

Eric Ash
Eric Ash
8,122 Points
Eric Ash
Eric Ash
8,122 Points

min-width: apply when the screen resolution hit that point

for example: @media (min-width: 660px) { some code } } //only apply when it above 660px

check out https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ code snippets for standard devices like iphone, tablets

Reginald Beneke
PLUS
Reginald Beneke
Courses Plus Student 4,282 Points
Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

@Steven, how do you know what those breakpoints are though?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Assuming you are developing using a PC with a large screen, you can adjust the window width as you watch the layout Then, when you have installed one or more breakpoints, the layout will change during the adjustment as you watch.

You can then "tune" the breakpoints to get the best appearance at every size, then you can be sure that you have accommodated both current devices and ones yet to be released.