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

Matthew Stewart
Matthew Stewart
9,214 Points
Posted by Matthew Stewart
Matthew Stewart
9,214 Points

Sass Code Challenge: Working with media queries

I'm not sure why my code is not working here, the challenge is:

Write a media directive for "screen" media with orientation "landscape". Within the directive, set the "width" attribute for all image tags to 360px.

    @media screen (orientation:landscape) {
    img {
    width: 360px;
  }
}

I keep getting this error: Bummer! The img width should be set to 360px.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Are you missing an "and"

@media screen and (orientation:landscape) {}

8 Answers

Knut Ringheim Lunde
Knut Ringheim Lunde
38,811 Points
Knut Ringheim Lunde
Knut Ringheim Lunde
38,811 Points

Challenge task 2 of 2: “Open a scope with the ID "menu" (...)”

The following worked for me:

@media screen and (orientation:landscape) {
    img {
    width: 360px;
  }
}

ul#menu {
    li {
    @media screen and (max-width: 500px) {
        text-align: center;
    }
  }
}

You have written the class-selector .menu instead of the id-selector #menu.

Sarah Hoopes
Sarah Hoopes
6,304 Points
Sarah Hoopes
Sarah Hoopes
6,304 Points

I found this link provided a great explanation on the use of the "and" keyword in Task 1 of the Code Challenge- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Matthew Stewart
Matthew Stewart
9,214 Points
Matthew Stewart
Matthew Stewart
9,214 Points

That worked great! Thanks for the help.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

No worries!

Wart Burggraaf
Wart Burggraaf
9,948 Points
Wart Burggraaf
Wart Burggraaf
9,948 Points

I get another error: "Oops! It looks like Task 1 is no longer passing." A bug I suppose..

img {
    @media screen and (orientation:landscape) {
    width: 360px;
    }
}

ul .menu {
    li {
    @media screen and (max-width: 500px) {
        text-align-center;
    }
  }
}

ARG, the markdown editor doesn't work either!