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
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsMedia Query Screen Width's
Somebody help. I am building my very first website, and how I am now trying to add media query for the responsive design. On studying media query online, I have discovered to my surprise that there are almost tons and tons of screen sizes in both smartphones, tablets and desk top, also depending on manufacturer.. And if I want my website to fit all screens (if that is possible) does it mean that I have to do a media query screen width for all the screen sizes out there, or is there a shorter way, maybe a standard for the different smarttphone/tablet, laptop and desktop sizes. This is tough but I find it exciting!
2 Answers
M. Cotter
6,179 PointsHi Christopher,
I know it's easy to get overwhelmed by all the options out there! I know that many people have different approaches to this. I generally use 480px for mobile, 768px for tablet, and a third break at 1200px for laptop. It may be helpful, since this is your first website, to keep it simple and go for 480px and 768px for now. For more information about the specific breaks (you may have already seen this website), you can check out this page: Media Queries for Standard Devices. Ultimately, you could drive yourself a little crazy trying to prepare for all of them, which is why I recommend taking it slow and starting with the two most standard/obvious options (a general mobile and tablet approach).
I hope this helps answers your question, at least partially! I'm sure some other folks will throw in their opinion as well.
Good luck!
M.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHi Cotter, thank you, this sets the flutters in my heart at ease because I was thinking I am now stuck. Thanks for the link I haven't yet read it and will do so tonight when I start coding. I had set three break points for smartphone, tablet and desktop using the Macbook developers function but as I was polishing them I decided to read around and suddenly got overwhelmed by these suggestions of so many screen widths. Let me crawl along and if I come across any other challenges I will send an SOS.
M. Cotter
6,179 PointsHi Christopher // This approach currently works for me, but it is possible that a different approach may work better for you. For example, another important break is 1024px where the tablet kind of moves into laptop. But with my current approach to designing and development, I like to create essentially two websites, a mobile-friendly version that is responsive up through 767px and a tablet/desktop-friendly version that is responsive from 768px on. This means that I basically have a (relatively) major design shift at 768px, but at 480px and 1200px, I usually have some minor tweaks that need to go in to accommodate/prepare for the new sizes (tablet, laptop/desktop). // Anyway, this is something that I am also trying to learn more about, so please feel free to let me know if anything comes up for you because I'd be interested in exploring this more in-depth. // By the way, in case you don't know, I find Chrome's Inspect Element to be super helpful because you can view the way your website looks on a variety of different devices (just check out the little mobile icon in the top-left of the Inspect Element window). This feature will show you how subtle the differences are between all of those different options when it comes to sizes which will help calm your mind in terms of which sizes to choose. :) It helps to see that, for the most part, sticking with the breaks that I've suggested above will work for most devices (depending on your project). // M.