Home/ Questions/Q 7176057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:25:53+00:00

I had a concern. I’m putting together a little site and for some reason

  • 0

I had a concern. I’m putting together a little site and for some reason my iphone and ipad media queries are colliding. The Iphone picks up on Ipad styles, but not vice versa. So I wanted to put what I’m using out there and see if anyone can help.

thanks guys.

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (max-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (max-device-width: 768px) and (orientation:portrait) //ipad portrait

I pulled these from a few tutorials that seemed pretty legit, any ideas why the styles are leaking?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re using max-device-width which will include iphone as well. Should be:

    @media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (min-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (min-device-width: 768px) and (orientation:portrait) //ipad portrait

    notice the min-device-width

    • 0