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 CSS Layout Basics CSS Layout Project Adding Media Queries for Large Screens

lesak
lesak
6,260 Points

Media queries' widths How do you know which width to set for the different screen sizes when using media queries?

For example, in the project the min-width for the second media query was set at 1025px? Why this size? Thanks for your help.

4 Answers

Jakob Wozniak
Jakob Wozniak
17,896 Points

http://lmgtfy.com/?q=media+query+breakpoints

:) But no joke- learning to google things like this is a necessary skill in this craft.

lesak
lesak
6,260 Points

Haha. This is very funny. I might have to steal your joke. Thanks for sharing.

lesak
lesak
6,260 Points

Thanks for this link. It's great info.

Abraham Juliot
Abraham Juliot
47,339 Points

Short answer: Let your content decide the widths.

"Don't define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. Instead, the content itself should determine how the layout adjusts to its container." https://developers.google.com/web/fundamentals/design-and-ui/responsive/#how_to_choose_breakpoints

brandonlind2
brandonlind2
7,823 Points

You could probably use the dev tools, if you go to "more tools", then "developer tools", a window should pop up and on the far left top corner there should be an icon of square and a mouse arrow, directly left of that there should be another icon with a box and a smart phone, click on the box and smart phone icon and it should open up a tool that allows you to see how your website would look in different devices. At the top there should be a drop down menu were you can pick different devices, it should show the different device's widths. I hope that helps

lesak
lesak
6,260 Points

Thanks Brandon. This is helpful for small devices. I just wasn't sure about the sizing for desktops.