Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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

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?

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

thanks guys, will take your approach

Vlad Legkowski
Vlad Legkowski
9,882 Points

thanks guys, will take your approach