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

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

what sizes to write media queries for?

what is the current screen sizes to write media query for in ems?

Katherine Wakefield
Katherine Wakefield
Courses Plus Student 4,154 Points

This CSS-Tricks article might get you pointed in the right direction: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Mark Shaw
Mark Shaw
10,449 Points

It might be a bit tricky to nail down in ems. Initially one em should be 16px. This can change if the font size changes. But if you take one em to be 16px then you can divide your @media width in px by 16 and get the em value.

1 Answer

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey Kelvin Atawura ,

besides the way to write them in em vs. px etc. the best way imho to actually set your breakpoints is to listen to your design, not the devices currently out there. because as we all know there are a ton of different one's out already and sure enough companies will continue to put out new one's. so instead of catching up with them focus on your design and put in a breakpoint when it makes sense, that way you're fine on all of them ;)

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l am trying to do that and it seem to pose an issue with every single device but just one element doing that so resolved it, then realise its not working on small devices so might need to cover the iphone widths into pixel and work with them then carry on from there

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l have managed to write some css and looks good to be. hoever l am having a bit of an issue with the media queries for small devices. l have coded for 20em but this is not parsin in the browser. with the inspector tools the image is using the quries from the other sizes liek 90em and that. how can l fix this,please?

Alex Heil
Alex Heil
53,547 Points

can you share a link to the site so that we can digg right into the code? without seeing the code in action it's quite difficult to predict what's going on wrong. but I would surely check it out and see if I can help out.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

its not live yet thats only problem so cant share it as of yet