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 Unused CSS Stages Media Queries Media Features and Media Types

Posted by Andrew Shipley
Andrew Shipley
7,781 Points

Media Features and Media Types Lesson

Hi,

I am trying to follow along but when I try and check the first media query nothing happens when I change the viewport size. I am sure I have set it up correctly and copied the correct CSS. Did anyone else have an issue with this lesson? Thanks

Micah Cooksey
Micah Cooksey
7,151 Points

Hi Andrew, can you post the code in question using the Markdown Cheatsheet as a guide?

5 Answers

Micah Cooksey
Micah Cooksey
7,151 Points

Okay, just poked around the Workspace a bit, and finally found the issue. The folder paths are case-sensitive, and since your CSS folder name is all caps, you need to either change it to be lowercase, or edit your HTML accordingly, e.g. href="CSS/style.css"

Make sense?

Andrew Shipley
Andrew Shipley
7,781 Points

A ha, thank you very much Micah.

Something new I didn't know yet!

Andrew Shipley
Andrew Shipley
7,781 Points
Andrew Shipley
Andrew Shipley
7,781 Points 
/* @import method */
/*
@import url("wider.css") screen and (max-width: 768px) and (min-width: 481px);
@import url("narrow.css") screen and (max-width: 480px);*/

body {
    font: 1.1em/1.5 sans-serif;
}
.wrap {
    width: 85%;
    margin: auto;
}
h1 {
    font-size: 3em;
}
p {
    margin-bottom: 1.5em;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (max-width: 768px)  {
    body {
        background: #FF6347;
        color: #FFF;
    }
Micah Cooksey
Micah Cooksey
7,151 Points

That's working for me -- I put your CSS into a CodePen so you can see what I mean.

Andrew Shipley
Andrew Shipley
7,781 Points
Andrew Shipley
Andrew Shipley
7,781 Points

I have tried moving the CSS file inside and outside of its own folder because sometimes that worked in previous lessons.

Micah Cooksey
Micah Cooksey
7,151 Points

Can you confirm that the rest of the styles are working? If not, you might have an issue with your stylesheet path.

It might help if you pasted the code you're using to link your stylesheet as well as the location of the stylesheet, e.g. /css/style.css

Andrew Shipley
Andrew Shipley
7,781 Points
Andrew Shipley
Andrew Shipley
7,781 Points

Thanks Micah, appreciated.

Could you possible access my workspace to see what's wrong? Its strange that it isn't working on my end.

I'm trying to do it in Chrome.

Thanks.

Micah Cooksey
Micah Cooksey
7,151 Points

Sure, feel free to post the link and I'll take a look.

Andrew Shipley
Andrew Shipley
7,781 Points
Andrew Shipley
Andrew Shipley
7,781 Points

http://teamtreehouse.com/workspaces/1454442#

Thanks!