Open a scope on an <ul> with the ID menu. Inside that, open a scope on a <li> element. Using Sass nesting, add a media q

Question

/* Write your SCSS code below. */ @media screen and (orientation:landscape) { img { width: 360px; } } ul#menu { li { @media screen { max-width: 500px; text-align: center; } } }

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="wrap">
    <h1>Hampton's Blog</h1>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Hampton</a></li>
      <li><a href="#">Hampton's Work</a></li>
    </ul>
    <img src="me2.jpeg" alt="">
    <div class="entry">
        <h1>Delicious Food in SF</h1>
        <div class="content">
          <p>
            You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include Mr. Chow's, Live Sushi and Piccino. 
            <a href="/info.html">Read More</a>
          </p>
      </div>
    </div>
    <div class="entry">
      <h1>Great Music</h1>
        <div class="content">
          <p>
              Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
            <a href="/info.html">Read More</a>
          </p>
        </div>
    </div>
  </div>
</body>
</html>

style.scss

/* Write your SCSS code below. */
@media screen and (orientation:landscape) {
    img {
    width: 360px;
  }
}
ul#menu {
  li {
    @media screen {
      max-width: 500px;
      text-align: center;
    }   
  }
}

Answer 1 · 2015-11-12T23:02:18Z

November 12, 2015 11:02pm

Ambria,

The mistake here is in the declaration of your second media query, perhaps caused by a misunderstanding of their instruction based on how they phrased their sentence.

You need to set your media query AT a max-width of 500px for the viewport, not set the li to have a max-width of 500px.

You have:

ul#menu {
  li {
    @media screen { /* your media query needs at least one expression to limit the stylesheet's scope (e.g. "( max-width: 500px )") */
      max-width: 500px; /* we don't need to set this property on the li */
      text-align: center;
    }   
  }
}

You need:

ul#menu {
    li {
      @media screen and ( max-width: 500px ) { /* here, we have our max-width expression set for the media query */
        text-align: center;
      }
    }
  }

Here is a link to the MDN documentation on media queries, which you may find worth a read. There is a lot of useful information contained there!

Hope this helps to clarify!

Erik

Welcome to the Treehouse Community

Looking to learn something new?

Ambria Phillips

Ambria Phillips

Open a scope on an <ul> with the ID menu. Inside that, open a scope on a <li> element. Using Sass nesting, add a media q

1 Answer

Erik McClintock

Erik McClintock