CSS Media Queries for Samsung S6

Media Query for Samsung Galaxy Tab 4 - 7 inch

I've created this and tested it on the device and it seems to be highly targeted and works.

@media only screen 
and (min-device-width: 800px) 
and (max-device-height: 1280px) 
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : portrait) 

{
  .galaxy {background-color:red;}
  .onlygalaxyportrait {display:block !important; background-color:green;}

}

@media only screen 
and (min-device-width: 1280px) 
and (max-device-height: 800px) 
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : landscape) 

{
  .galaxy {background-color:yellow;}
  .onlygalaxyland {display:block !important; background-color:orange;}

}

Media Queries not working properly to change the width

the min-width works if range is outside that specified px value and max-width works for that specified range.

I think it is because you are setting width:60% for both device size.
and you are using max-width:45px property on .calculator class so need to change that property in media query and if you want width of your calculator to fit the width of the display size you can remove that property of max-width.
You should try:
works when size of display is in range of 320px and change width according to your need

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

works when size of display is greater than of 320px and change width according to your need

@media screen and(max-width: 320px) {
  .calculator {
    max-width: 60%;
  }
}

Related Topics