Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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