Search code examples
htmlcssmedia-queries

Media query CSS not working

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.

Solution

  • 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