I'm writing the media query for our client site. I have started from iPhone 8 and used the below media query:

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


after completing the media query for iPhone 8; I have checked the front end and see that it looks good. However, the design seems collapsed after I wrote the media query for iPhone 8 plus. I have used the below media query for iPhone 8 plus:

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3){


Could anyone please help me to avoid this conflict?

Looking forward to your reply.

Your Answer

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

Browse other questions tagged or ask your own question.