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
Darius Grigalevicius
4,062 PointsProblem with media query challenge.
Hello developers and learners all together! my first post since ive started learning, just cant get that threw the head. the 3rd challenge problem states "Create a new media query that sets the width of '.wrap' to 980px if the viewport is 1000px or wider."
my code:
@media screen and (min-width:1000px) {
.wrap {width:980px;}
}
Dont see the code problem... can someone help? thank you!
9 Answers
akc
11,729 PointsI actually don't see any code problem. What does the error message say?
Aernout Zevenbergen
10,604 PointsI'm not getting it... This should be correct, right?
@media only screen and (min-width: 1000px) { .wrap { width: 980px; } }
babu dahal
4,814 Pointsthis worked for all 3 challenges. @media screen and (min-width:481px) {.col {float:left;}} @media only screen and (min-width: 769px) {.logo { float: left; } .main-nav { float: right; }} .main {width: 0.425531914894%;} .extra {display: block; width: 23.404255319149%;} @media only screen and (min-width:1000px) {.wrap { width:980px; }}}
Rasmus Brokhattingen
6,108 PointsThe problem is that you forget a curl bracket.
You're not closing the @media only screen and (min-width:x ) { } declaration! So at the last task the code will mess up, as the syntax is incorrect.
Chase Lee
29,275 Points[Please delete this!!!]
Chris Sicam
4,482 Pointsugh the code isn't working for me, not sure what I'm doing wrong!!!
This is what I'm using
@media screen and (min-width: 1000px) { .wrap { width: 980px; } }
t keeps asking if I specified the right width and yes I even tried only in between media and screen
Darius Grigalevicius
4,062 Pointsyou left out the "only" between @media and screen, the correct syntax is "@media only screen and". since you only want the query to kick screen devices not affecting handheld devices with retina etc. That is the only mistake i see.
Hardeep Sidhu
Courses Plus Student 6,908 PointsCan someone please tell me whats wrong with my code:
@media only screen and (min-width: 1000px) { .wrap { width: 980px; } }
keep getting the area did you specify the right width?
Hardeep Sidhu
Courses Plus Student 6,908 Pointsnever mind when i did all 3 tasks again it seemed to work. weird :S
Errol Russell
6,197 Points.extra { display: block; width: 23.404255319149%; } } /* need to add the other closing bracket */
Darius Grigalevicius
4,062 PointsDarius Grigalevicius
4,062 Pointsi Dont understand why i did get the error firstly, it passed the second time i tried, forgot the "only" property. the correct code is @media only screen and (min-width:1000px) { .wrap { width:980px; } } the reason why max-width property doesn't work is the fact that the query is instructed to 1000px and below which is not what the challenge specified. Thank you for the answers :)
Chase Lee
29,275 PointsChase Lee
29,275 PointsOh yah. Oops I got them mixed up. Sorry about that.