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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

Eric Orellana
Eric Orellana
4,105 Points
Posted by Eric Orellana
Eric Orellana
4,105 Points

How is a media query breakpoint determined?

Guil determines the media query break point at max width:999px at time: 05:42....Is there an effective way to find the breakpoint.

2 Answers

myackley35
myackley35
34,574 Points

Hi Eric!

The media query is determined, in this case, by the maximum width of the browser window.

Having Chrome Developer Tools open while resizing a web page should give you the dimensions of the browser. Here's a post on other extensions available for Chrome. "Web Design view" (Tools > Web Developer > Web Design View) in the Firefox Development tools is a comparable option.

I hope this helps you out!

Shamus Griffin
Shamus Griffin
8,206 Points

If you enable Rulers, it gives an added bonus!

Eric Orellana
Eric Orellana
4,105 Points
Eric Orellana
Eric Orellana
4,105 Points

Awesome thanks Mark, i will keep in mind of using the developer tools

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Eric,

There isn't really any science behind deciding on your breakpoints; it's pretty much whatever you want/need. There are some common breakpoints that some people use as a guideline for targeting certain/specific device sizes, but with how frequently device sizes fluctuate, it's generally best to just design a totally fluid, responsive site that works well at any screen size. To do that, you simply need to test and look at your site at different sizes, and when you see something breaking at a particular size, you create a breakpoint for that size. Rinse and repeat :)

Erik

Eric Orellana
Eric Orellana
4,105 Points
Eric Orellana
Eric Orellana
4,105 Points

From one eric to the other, thank for the common breakpoints... I like how the breakpoints are specified for many devices.