CODEWITHSUNDEEP
htmlcssresponsive-designstylesmedia-queries
Volkan
Volkan

Reputation: 546

CSS media queries different results

Why is a DIV displaying different on mobile phone and a resized desktop window? 

@media (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

This is what I need... when viewed on desktop resized window it is ok, but on mobile phone it is not

Upvotes: 0

Views: 125

Answers (3)

Sumit Sahay
Sumit Sahay

Reputation: 514

!important is a very bad thing in CSS, use selectors instead.

Read this: https://css-tricks.com/when-using-important-is-the-right-choice/

Coming to your question

Change:

@media (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

To:

@media all and (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

try to this

.header{height:200px; width:200px; background:red;}
 @media (max-width: 327px) {
        .header  {height: 0px;}
    }
    
    @media (max-width: 440px) {
        .header  {height: 0px;}
    }
<div class="header"></div>

Upvotes: 2

IAmJulianAcosta
IAmJulianAcosta

Reputation: 1212

It could be that your phone width is more than 327px, so the rule is not active in your phone

Check this: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Upvotes: 1

Related Questions