CODEWITHSUNDEEP
htmlcssmedia-queries
Rajeev
Rajeev

Reputation: 312

Media Query Not Working display:none to display:inline

I have a simple html as follows

<div id="break" style="display:none">
 <br />
</div>

I am trying to display that break when user decreases the window size. I am using css3 media query. I tried as follows 

@media only screen and (max-height :510px){

    #break
    {
        display:inline;
    }
}

But that Break is not showing up. Anything am I missing ?

Upvotes: 2

Views: 2931

Answers (3)

MarkvA
MarkvA

Reputation: 121

You're applying the display:none; styling through inline HTML (style="display:none"). By default, CSS does not override the inline styling. In order to have the CSS override the inline styling, use the !important; declaration:

@media only screen and (max-height :510px) {
    #break
    {
        display:inline !important;
    }
}

Here's a fiddle.

Upvotes: 5

Onkel Toob
Onkel Toob

Reputation: 2212

This is due to the specificity of the style attribute. Here's a sentence from the CSS2 specification (and more specific: the specificity section):

The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

Don't get confused by the term STYLE element, this also covers CSS rules from external stylesheets.

So apart from this being a slightly weird way of displaying a line break you'd just have to put the display: none; line into your CSS file or <style> element.

#break
{
    display: none;
}

@media only screen and (max-height: 510px){

    #break
    {
        display: inline;
    }
}

Upvotes: 0

httpgio
httpgio

Reputation: 127

You can start with putting display none into the external style sheet instead of inline, where it will override your CSS property.

Upvotes: 0

Related Questions