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
Ross Horak
20,890 PointsPercentage value does not work for media query max/min-width
I tried using a percentage value instead of a pixel value, however my code editor (sublime) linter returned an error and the media query did not work. This was my code:
@media screen and (max-width: 50%) { body { background: green; } }
When and how can one use percentage values in Media Queries properly?
2 Answers
Sean T. Unwin
28,690 PointsIf you want to set the media query to 50% of the screen width I would recommend using vw units, where vw stands for View Width and 100 would be 100% of the view width. This works in all browsers except IE<9 and Opera Mini.
@media screen and (max-width: 50vw) {
}
David Tonge
Courses Plus Student 45,640 PointsI'm not too familiar with using percentages with media queries but I'm guessing that you need a parent element set at 100% percent.
Ross Horak
20,890 PointsI tried setting parent to 100% - doesn't work either. I'm not entirely sure it is possible to use a percentage value when it comes to break points..
David Tonge
Courses Plus Student 45,640 PointsYou're correct. I looked it up.
http://community.sitepoint.com/t/pixels-or-percentages-for-media-queries/37487/3