All,
I am trying to develop a responsive site, but for some reason the media query I use for the ipad/tablet is also effecting the iphone/mobile. Are my dimensions wrong?
What is the best way to target all three device types?
Thanks
/desktop/ @media (min-width:1100px)
/ipad/ @media screen and (max-width: 1115px)
/iphone/ @media screen and (max-width: 767px)
This is a common problem in responsive design and there are many approaches that try to solve it. I myself find a 4-breakpoint layout to be the most fitting for most of the situations.
Phone: default
Phone-Landscape: min-width 480px;
Tablet: min-width 768px
Tablet-Landscape: min-width 1024px
Desktop: min-width 1260px
Think of min-width as meaning greater than or equal to and think of max-width as meaning less than or equal to.
By that logic your iPad rules (less than or equal than 1115px) are also going to affect the iPhone since it's screen is less than 1115px.
It sounds like you want to use an AND on your ipad rule to make it only affect rules that are bigger than your iphone rule set. Something like:
@media screen and (max-width: 1115px) and (min-width: 768px)
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more information
