CSS Media Queries Overriding Each other

Question

Thanks Stack Overflow for helping. I've got some custom css I'm using to tighten up a design. I keep running into this issue where if I change something in one media query say for the iphone 6, that change then affects another device say the iphone 5. Its becoming this issue were I'm constantly adjusting with no end in sight. Here are my @media break points I'm using.

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

}

/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 

}
/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
     } 


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

Any help would be greatly appricated.

Answer 1

I agree with Birdman, and you should consider a mobile first approach. Mobile first, however, means that the smallest device size is completely outside of any media query. The next size up will start the first media query. You only ever need a min-width, as these new styles will be in addition to the base styles, not overwriting them. Each media query created will continue to combine with those already called.

And instead of worrying about iPad this, or tablet that... worry about when your design elements start to look bad. All of the major browsers have intelligent enough emulators to test in different device sizes.

Here is a good article on the pros and cons. I always code mobile first, and never worry about styles colliding, unless I do it on purpose :)

https://codemyviews.com/blog/mobilefirst