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

Mark Hill
Mark Hill
9,047 Points
Posted by Mark Hill
Mark Hill
9,047 Points

Can't seem to get separate media queries stylesheet to work

I've written a media rule. It works when it is placed at the bottom of my original stylesheet (css/tvguide.css) but doesn't seem to work at all when I transfer it to a separate file (css/media.css). In the 'how to build a website' video, the media rules are in a separate file, but I can't seem to replicate this, and not sure where I'm going wrong.

Here is my html head:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/tvguide.css">
    <link rel="stylsheet" href="css/media.css">
    <title>TV Guide</title>
  </head>

here is media.css :

@media screen and (min-width: 480px) {
  .content{
    background-color: green;
    }
.listwidth {
  display: inline-block;
  width: 40%;
  }
}

2 Answers

Anusha Singh
PLUS
Anusha Singh
Courses Plus Student 22,106 Points
Anusha Singh
Anusha Singh
Courses Plus Student 22,106 Points

Hi, Mark. I might have a solution to your problem. The link tag for media.css, the 'rel' attribute seems to be missing an 'e' between in the word 'stylesheet'.

This is your code: <link rel="stylsheet" href="css/media.css"> Please add an 'e' between 'styl' and 'sheet'

I hope this was the solution to your problem! :)

Mark Hill
Mark Hill
9,047 Points
Mark Hill
Mark Hill
9,047 Points

Thanks! Was looking for ages and just couldn't see it!

Carlos José
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

And always should check errors at the developer tools. Where he could've spot this.

Anusha Singh
PLUS
Anusha Singh
Courses Plus Student 22,106 Points
Anusha Singh
Anusha Singh
Courses Plus Student 22,106 Points

Well, I'm happy that you got the solution to your answer