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!

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

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

What's wrong with my CSS? Media queries?

Hi, please have a look at the site http://www,ajp.cool

Reduce your window width to less than 600px. Well at less than 600px the text test and slider should disappear but thay don't.

Here is an excerpt of my HTML:

<div class="test">test</div>
<div class="flexslider">
    <ul class="slides">
        <li>
            ... 
        </li>
    </ul>
</div>

Here is my CSS:

@media screen and (max-width: 600px) {
    .flexslider,
    .test {
        display: none;
    }
}

The thing is also that my CSS file has a red mark - like something is wrong with it. I've checked it out here http://www.css-validator.org/ and the error for the above CSS line is:

Value Error : max-width Property max-width doesn't exist for media screen : 600px 600px

Anyone knows what's going on here?

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points
Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

you forgot the only ;)

@media only screen and (max-width: 480px) { }

2 Answers

Hichem Refes
Hichem Refes
2,264 Points
Hichem Refes
Hichem Refes
2,264 Points

Hi Maja

Your code is correct, but for some reason the CSS of child theme doesn't override the css of your main theme. I have checked quickly other properties from your child style.css, and they don't load as well.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi Hichem, I've spend some time right now deleting and placing back sections of my CSS ... searching for the section that makes a mess and finally realized that one media query (not the one mentioned above) was missing one } at the end.

Usually such mistakes are visible (different color in the code). But this media query was placed just before the commented section and therefor wasn't visible somehow.

So happy that I've solved this problem.

Thank you for checking my CSS.

Jeffrey Lego
Jeffrey Lego
9,458 Points
Jeffrey Lego
Jeffrey Lego
9,458 Points

@media only screen and (max-width:600px) { } You forgot ONLY in your media query. This passes the W3C CSS3 validation service.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Are you sure?

I've added only, so like this

@media only screen and (max-width: 600px) {
    .flexslider,
    .test {
        display: none;
    }
}

but the problem is still here.