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

Vlad Legkowski
Vlad Legkowski
9,882 Points
Posted by Vlad Legkowski
Vlad Legkowski
9,882 Points

What width to target!? Confused

Hi All,

Maybe some of you saw before, as i asked few questions here earlier, for which received an amazing support and very helpful answers, but I am just a bit lost with @media device width...

For example, for a whole range of iPhones, can I just target

@media screen and (max-width: 480px) and (min-width: 320px) {}

or iPhone starts at 640? or 640 is device width? and if so, should i go by device width?

I just want simply 3 max 4 media queries, phones, tablets, desktops, thats it!

Thanks guys and gals!

5 Answers

Gregor Cmiel
Gregor Cmiel
8,926 Points

Hi Vlad,

you shouldn't set your breakpoints depending on a device. The amount of devices with different resolutions grows from year to year and there are coming more and more devices like watches, car displays and so on. The Internet is everywhere (Internet of Things) and the range is pretty unpredictable.

Better concentrate on your content and set your breakpoints depending on it. You have a grid with two cols for example. With a width of 450px it looks quite unreadable because the width of each col is too small. It would be much more readable in one col. So you set the breakpoint here depending on your content and not the device. Do it for the whole project and you will get a nice page that looks good on most devices.

Hope that helps.

Best regards

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

Hi Vlad, I would start checking out web pages with the Responsive Design View in Firefox. I am currently working on a site where there is a min-width 769px (covering the desktop versions), and at 768px and below the tiles are full width. This works for my design. However, if at 320px your design does not look good, you might want to add in a max-width 320.

Check out other sites and see how they approach responsive design. It will give you some great inspiration!

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Thanks guys, but i need to keep in mind that people normally open sites on their mobile, right? So i should try and make site look good for all mobile devices, so what do you all think, @media screen and (max-width: 480px) and (min-width: 320px) {} sounds like a good coverage for mobile device?

Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

Hi Vlad, Like Gregor said, it depends on your content. Are you doing changing the css for anything below 320px? If not, then you shouldn't need to have a min-width of 320px.

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

thanks guys, will take your approach

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

thanks guys, will take your approach