Media query CSS not working

Question

I am trying to do a media query to hide some text when i apply a class due to making it responsive, i normally use foundation but i need a custom media query.

It seems to not be applying.

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hideMediaQuery{display:none !important;}
}

Here is my class i am trying to apply it to:

 <div class="large-12 columns ProductDropdown left">
     <p class="hideMediaQuery">RACES</p>
     <label>
         <p>TESTEST</p>
     </label>       
 </div>

Anybody know why it is not working? I have just put it in style tags at the top of the page to test it before i put it in a style-sheet is this the reason?

Any advice would help.

Your code is perfectly valid and should work, even in a <style> tag. Can you provide us the relevant HTML? (<head> par and the line where you're using .hide-for-text) — zessx
– zessx, Commented Nov 13, 2014 at 10:01
Try pasting that code in the bottom of the page - I'm guessing that this code is being overridden — Danield
– Danield, Commented Nov 13, 2014 at 10:01
We'd need a demo to be sure. Try putting it at the bottom, as media queries are still part of the cascade ... although !important would normally trump anything. — ralph.m
– ralph.m, Commented Nov 13, 2014 at 10:01
I have inserted my class i am trying to make it to in the code — Pete Tong
– Pete Tong, Commented Nov 13, 2014 at 10:09

Danield · Accepted Answer · 2014-11-13 10:05:10Z

1

If you have css classes written as follows:

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hide-for-text{display:none !important;}
}

.hide-for-text{display:block !important;}

...the code in the media query will be overridden and hence won't work.

DEMO 1

Media Queries should generally be placed at the bottom of the CSS file to overcome this problem.

(WORKING) DEMO 2

answered Nov 13, 2014 at 10:05

Danield

126k37 gold badges235 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Media query CSS not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related