CSS Unused CSS Stages Media Queries Media Features and Media Types

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

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

5 Answers

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?

A ha, thank you very much Micah.

Something new I didn't know yet!

/* @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;
    }

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

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

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

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.

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