Currently, we are working on the compatibility of our client site. We have started this from the resolution 375x667 and completed it.

After that, we have started to write media query for the resolution 360x640 but noticed that the media query which we have written for the resolution 375x667 is conflicting to the resolution 360x640.

For your reference, we have used the below CSS for the resolution 375x667:

 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){


and for the resolution 360x640:

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){

I have tried to understand this issue through various posts but didn't get a satisfying answer.

Could anyone please help me throughout this?


This is expected behaviour because you're overlapping your media queries.

First one will apply at 375px and end at 667px. Second one will apply at 360px and end at 640px.

So between 375px and 640px both of your media queries will apply.

Also it's unlikely you need and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2), this means your media queries will only apply on portrait and certain devices with a min pixel ratio of 2. What if a user has their device landscape and it's 640px wide?

  • Thanks. Do I need to define pixel ratio "-webkit-min-device-pixel-ratio: 2" in media query? – Siva Feb 28 '19 at 8:46
  • No, unless you want to target devices with a certain pixel density which is unlikely. – Ben Crook Feb 28 '19 at 10:52
  • Thanks. Could you please guide me on how to avoid conflicting media query? – Siva Mar 6 '19 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.