CODEWITHSUNDEEP
cssresponsive-designmedia-queries
keescavia
keescavia

Reputation: 11

@media query does not resize

I want to make one part of the page responsive. But I cant get it working. Only the media query with 1920px works.

this is my code:

@media screen and (max-width: 1440px) and (min-width: 1350px) {
        #designer-info {
    margin-right: -129px;
    }
}    
@media screen and (max-width: 1920px) and (min-width: 1700px) {
        #designer-info{
        margin-right:-8%;
    }
}  
@media screen and (max-width: 2880px) and (min-width: 1920px) {
        #designer-info {
    margin-right: -430px;
    }
}

Could somebody help me. i cant find the solution.

Upvotes: 0

Views: 473

Answers (3)

Chanon Saelee
Chanon Saelee

Reputation: 25

maybe override there (max-width: 1920px) and (min-width: 1920px)

You should to use the different width in each media query.

Hope this can help you Ex.

(max-width: 1920px) and (min-width: 1700px)

and

(max-width: 1921px) and (min-width: 2880px)

Upvotes: 0

dippas
dippas

Reputation: 60553

Not working because you have in one query min-width:1920px and in another query max-width:1920px, so it will override.

don't need to use both max-width and min-width

either use mobile first approach using min-width

@media (min-width: 1350px) {
  #designer-info {
    margin-right: -129px;
  }
}
@media (min-width: 1700px) {
  #designer-info {
    margin-right: -8%;
  }
}
@media (min-width: 1920px) {
  #designer-info {
    margin-right: -430px;
  }
}

or non-mobile approach using max-width

@media (max-width: 2880px) {
  #designer-info {
    margin-right: -430px;
  }
  @media (max-width: 1920px) {
    #designer-info {
      margin-right: -8%;
    }
  }
  @media (max-width: 1440px) {
    #designer-info {
      margin-right: -129px;
    }
  }
}

Upvotes: 1

lwinkyawmyat
lwinkyawmyat

Reputation: 1242

Need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML head section.

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   ...
 </head>
 <body>
   ...
 </body>
</html>

Upvotes: 0

Related Questions