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

Posted by Sebastian Andersson
Sebastian Andersson
7,468 Points

Why is this Media Query not working?

This media query won't respond!! I can't seem to understand what the problem is. Someone please give me a quick hand over here. Thank you.

/* Large desktops and laptops */ @media (min-width: 1200px) and (max-width: 2000px) { .menu select, .menu button { display:none; } }

4 Answers

Jake Lundberg
Jake Lundberg
13,965 Points

here, check this out...see if this works on your machine. I have confirmed it works on mine. All I did was copy and past your code into it, and added some color changing css for the h2 element in each of your media queries.

http://codepen.io/iamtheWraith/pen/zGVEgv?editors=110

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

I copied and pasted your code, and it is working fine on my end. Can you show more of your code? Perhaps there is an error elsewhere...?

Sebastian Andersson
Sebastian Andersson
7,468 Points

Sure.

/* Large desktops and laptops */
@media (min-width: 1200px) {
    h2 {
        color:green;
    }
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    .maincontent-img {
        max-width: 100%;
    }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

    .maincontent-container {
        margin-top:2em;
    }

    .maincontent-img {
        max-width: 100%;
    }
    .nav-list a {
        display: block;
        margin-right: 0;
    }

    .nav-list a {
    margin-right: 0em;
    margin-bottom: 0.3em;
    }

    .topper {
        position:initial;
    }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {
    .maincontent-paragraph {
        display:none;
    }

    .mobile-display {
        display:block;
    }

}



.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

REALLY grinding my gears right now I can't seem to understand what the problem is.

Jake Lundberg
Jake Lundberg
13,965 Points

Yeah I just copied and pasted this code too, and it worked just fine for me. Each of the media queries responds as I expected them too...

in your original post, you posted the code:

.menu select, .menu button { display:none; }

but I don't see that portion in this bigger block of code...did you remove it? the issue may not be with the media queries, it might be with the selectors you are using...

Sebastian Andersson
Sebastian Andersson
7,468 Points
Sebastian Andersson
Sebastian Andersson
7,468 Points

I didn't remove it it's another project. But the media queries are the same. I'm simply giving like all h2's a color of green and nothing happens. I don't understand a thing.

Sebastian Andersson
Sebastian Andersson
7,468 Points
Sebastian Andersson
Sebastian Andersson
7,468 Points

It works now. It was probably, like you said, something wrong with the selectors. Thank you for taking up your time buddy. Much appreciated.