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

Joe Consterdine
Joe Consterdine
13,965 Points
Posted by Joe Consterdine
Joe Consterdine
13,965 Points

What's the best way to think about setting media device sizes?

Hey,

I'm wondering how people go about thinking about setting widths for every device.

If you use Bootstrap they obviously have sizes screen small, medium, large etc.

So I think medium is like 768px by default and large 992px.

How do you set these widths? I mean I get 768px is a pretty common IPad size but why 992px? Does it even matter?

Especially using SASS I've seen people use what looks like pretty complex grid systems/device width loops etc.

How do you guys go about it? And what's your thought process.

Thanks

2 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Joe,

In terms of Bootstrap's media queries they've just kind of pulled some common widths that allow them to target most things generally. A lot of those grid systems do this for you natively if you're using a grid framework. That's really one of the key benefits.

Now if you're doing it from scratch the general idea is to find a spot where you're layout breaks and create a breakpoint/media query. If you're doing things mobile first you start with your browser in that thin media query, drag it out and see where the content breaks or should behave better. As you start to notice patterns you can group those media queries together... so you can "okay for me tablet is going to be this max-width" so you aren't dealing with dozens, but really just 3 or 4.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Tim,

thanks for the advice!