Responsive css is not working

Question

I am writing separate separate css for device resolution with

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) { // css goes here }

and device resolution with

@media only screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) { // css goes here }

But 360px*640(orientation:portrait) css is not working. its taking default 320px*480px CSS. How i write css which work on 360px*640(orientation:portrait) device.

Answer 1

try this:

@media only screen 
  and (min-width: 320px)
  and (max-width: 360px) 
  and (orientation: portrait) {
  // 360px width goes here
}

@media only screen 
  and (max-width: 320px) 
  and (orientation: portrait) {
  // 320px width goes here
}