Specificity issue with IDs and media querys

Question

I am having some trouble with CSS, when i try the site on a mobile device the line height remains at 65px , this can be fixed by putting a !important in front but this is not the kind of fix i want, should i be using a class or something?

Thank you very much

/*Change the glyph size when necessary*/
@media only screen and (max-width:990px)
{

    #IEGlyphPlacement 
    {
        line-height: 80px;
    }

}


#Glyph 
{
    line-height: 65px;
}

Answer 1

You're targeting a different element inside of the media query. The media query is targeting the element with an ID of IEGlyphPlacement, rather than Glyph (which you define in the non-media query code).

Update as follows:

/*Change the glyph size when necessary*/
@media only screen and (max-width:990px)
{

    #Glyph 
    {
        line-height: 80px;
    }

}


#Glyph 
{
    line-height: 65px;
}