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 CSS Layout Basics CSS Layout Project Adding Media Queries for Large Screens

Posted by v s
v s
366 Points

Can you please tell me why my media query not working? I tried writing the code outside the media query, worked fine

@media (min-width: 769px) {

  .container {
    width: 90%;
    margin: 0 auto;
  }

  .name {
    float: left; 
  }

  .main-nav {
    float: right; 
  }

  .main-nav li {
    display: inline-block;
    margin-left: 15px;
  }

  .tagline {
    font-size: 1.5em;
  }

    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }
}

1 Answer

Alexander Besse
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 35,115 Points
Alexander Besse
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 35,115 Points

Hi, v s!

Looking at the syntax for CSS Media queries, you'll want to add a " not|only mediatype".

@media not|only mediatype and (media feature and|or|not mediafeature) {
    CSS-Code;
}

Take a look at W3Schools Media Queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

v s
v s
366 Points

Thanks, Alexander Besse! But I still don't understand Dave did the exact same thing but it worked in the video but not for me!! Why?

v s
v s
366 Points

The media query is still not working, I don't know what am I doing wrong

Alexander Besse
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 35,115 Points
Alexander Besse
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 35,115 Points

You're right, v s.

I tried this code in the Treehouse Workspace and in my own IDE, and it works. Im not sure the problem is with your initialization. Throw the code below into your code editor, then resize the screen to see if that works. If it does, the problem isn't with your media query. What specifically isn't working?

@media (min-width: 769px) {
  body{
    background:red;
  }
}