CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Z2VvZ3Vp
Z2VvZ3Vp

Reputation: 7593

CSS3 Media Queries Not Being Picked Up

I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.

I've tried to following:

@media screen and (max-device-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}
@media (max-device-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}
@media screen and (max-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}

I load it at the end of my head file and when i look at it in firebug it's there.

Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.

Ok I'm even doing this:

.logothingy {
border:1px solid;
}
@media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}

and it's putting the border and not doing the rest of it. I have this in the head

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

Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.

Upvotes: 1

Views: 1844

Answers (2)

Schreyers
Schreyers

Reputation: 71

I had the same dramas and noticed that i had missed this:

<meta name="viewport" content="width=device-width">

in the head of my index page. Added it and media queries all kicked in.

Upvotes: 2

Santiago Rebella
Santiago Rebella

Reputation: 2449

This is the correct one

@media screen and (max-width: 480px){
}

Try to put inside only .logothingy instead of div.logothingy and let us know if worked

Upvotes: 0

Related Questions