Welcome to the Treehouse Community
Looking to learn something new?
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.
Jennifer NordellTreehouse Teacher
Here's a pretty decent list of devices and the standard sizes for media queries. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Abraham Juliot47,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
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