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

Gemma Weirs
Gemma Weirs
15,054 Points
Posted by Gemma Weirs
Gemma Weirs
15,054 Points

Width or device-width?

I'm a bit confused. I'm trying to create my own grid system, using one of the videos on here as a guide. When I check resources like screensiz.es, there's a width column and a device-width column. But I'm not sure which column I should refer to for my breakpoints. Any help would be appreciated.

1 Answer

Brian MacDonald
Brian MacDonald
4,951 Points
Brian MacDonald
Brian MacDonald
4,951 Points

Hello Gemma,

This a common question when approaching media queries! Essentially there are two options to choose from:

  • Width refers to width in pixels, it is simple as that! You set it to 320 to 480 pixels, your query will trigger within that size range.
  • Device Width can be more deceiving, it refers to the width of the device screen itself (resolution the device is capable of doing).

The issue with device width is today so many different devices are available to consumers, and each can have a large spectrum of differences in screen resolution i.e:

  • Ipad 3 & 4 - dimensions of 1536 x 2048 device dimensions of 768 x 1024 landscape
  • Kindle Fire - dimensions of 1024 x 600 device dimensions of 1024 x 600 landscape

Width can be a lot more versatile when making general queries across a broad span of pixel widths to ensure you know you will hit those spots!

However - when it comes down to targeting a specific mobile device/tablet device-width can come in handy for sure.

I hope this helps you in your development of your grid system!

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

Thanks. I figure it's the device-width I need to use. :)