CODEWITHSUNDEEP
htmlasp.netcss
user2226785
user2226785

Reputation: 489

css media statment is not working

I have this css

@media screen and (max-width :300px) {
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;        
    text-decoration: none;
  }
}

which meas that I want to change the css when the size becomes less that 300 px

I have added this meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

but

when I change the size of the browser to less that 300 px, these css doesn't apply. I know that because I check the firbug and checked the used css and my css haven't shown.

Edit

This is my default css

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

and in the firebug, I always see that one, not the one in media

Upvotes: 0

Views: 55

Answers (1)

Lu Roman
Lu Roman

Reputation: 2260

Your media query css has the same properties as your default css and with the same values, that won't do anything. You need to set the value that must change and only that, lets say, you want to remove the padding, you then specify that in the media query, be aware that for this to work, it must be below your default css (Cascade style) or the default will take precedence. So always remember that the media query rule will be applied on top of your default, not instead.

Here is an example based on your code, and as you can see it works as it should:

jsfiddle Demo

Html

<div class="ui-tabs">
    <nav class="ui-tabs-nav">
        <a href="#" class="ui-tabs-anchor">Link 1</a>
    </nav>
</div>

Css

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
    background: red;
    display:block;
}

@media screen and (max-width :300px) {
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor    {
        padding: 0;
    }
}

Note Sometimes you must add the '!important' flag to the property value if it was set in the default by targeting its id.

Upvotes: 1

Related Questions