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 CSS Media Queries Complex Media Queries

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,794 Points
Posted by Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

Problem changing the Header text color depending on the width of the browser.

So I input the code just as the video instructed and no matter what dimensions i put the browser in to i can't get the text to change color. I can't seem to figure out what i'm missing after troubleshooting for a while now.

        @media screen and (min-width: 600px) and (max-width: 800px) {
    header {
        color: yellow;
    }
}
jb30
jb30
44,806 Points

Your code works in my browsers. Do you have syntax errors earlier in the CSS file?

Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points
Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

These are the 2 areas it says there are errors when run it through the validator. I'm not sure if either of these would cause the problem.

 #interesting-banner {
    position: sticky;
    z-index: 3;
    top: 0;
    padding: 10px 15px;
    border: 12px solid lightsalmon;
    margin 0 -8px;
    background: firebrick;
    color: white;
    font-weight: bold;
} 

    @media screen and (min-width: 600px) and (max-width: 800px) {
        header {
            color: yellow;
        }
    }
@media screen and (min-width: 730px) {
        ul li {
            display: inline-block;
            width: 30%;
        }
    }
jb30
jb30
44,806 Points

To fix the first error, you could change margin 0 -8px; to margin: 0 -8px;, but it doesn't cause the problem.

I'm not seeing a syntax error when I run the second set of code through a validator. What code do you have right before it, and do you see the result from the second media query when the dimensions are large enough?

1 Answer

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,794 Points
Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

I figured it out finally, I had not completely deleted my previous media query for screen dimensions and that one was taking priority without there being an actual error, Thanks for the help though!