Media queries overriding each other - weird situation

Question

My iPhoneX media query is overriding all of my other media queries. All of my other media queries accept their coirreect screen sizes using min/max width.. but for some reason IphoneX makes all of the other media queries invalid. Could anyone help?

/* images */

img{
    max-width: 250px;
    width: 100%;
  }

  /* Header image */

  .headerImg{
    max-width: 250px;
    margin: 0 auto;
    padding-top: 10px;
  }

  /* Title */

  .title{
    max-width: 250px;
    margin: 0 auto;
    padding-top: 20px;
  }

  /* voting buttons */

  .vote{
    position:relative;
    text-align: center;
    padding-top: 20px;
  }

  #vote1 .dot{
    width: 13px;
    height: 13px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 28px;
    left: 15px;
    border: 2px solid white;
  }

  #vote2 .dot{
    width: 13px;
    height: 13px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 24px;
    border: 2px solid white;
  }

  /* GLOBAL CLASSES */

  .flexCenter{
     display: flex;
     justify-content: center;
     align-items: center;
  }

  .paddingTopBottom{
     padding: 10px 0;
  }

<!-- iPhone4/4s -->
<link href="https://pub.s6.exacttarget.com/vaf4d25yesa" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)">  
<!-- iPhone5s/5c/5se -->
<link href="https://pub.s6.exacttarget.com/asgp1bospyf" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 568px)">  
<!-- iPhone6/6s/7/8 -->
<link href="https://pub.s6.exacttarget.com/c3c1pf4b2me" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 667px)">
<!-- iPhone6+/7+/8+ -->
<link href="https://pub.s6.exacttarget.com/qjhe5zmjrys" rel="stylesheet" media="screen and (min-device-width: 414px) and (max-device-width: 736px)">
<!-- iPhoneX -->
<link href="https://pub.s6.exacttarget.com/ioeyyyvvogl" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 812px)">

And here are the linked media queries.

/* Media queries for mobile sizes */

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) { 
    .headerImg{max-width: 280px !important;padding-top: 50px !important}
    .title{max-width: 280px !important;padding-bottom: 50px !important;padding-top: 25px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 11px !important;left: 15px !important;}
    #vote2 .dot {top: 11px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 120px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) { 
    .headerImg{max-width: 280px !important;padding-top: 20px !important}
    .title{max-width: 280px !important;padding-bottom: 40px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 13px !important;left: 17px !important;}
    #vote2 .dot {top: 13px !important;left: 11px !important;}
    .smartcapture-submit-button-wrapper{bottom: 80px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) { 
    .headerImg{max-width: 280px !important;padding-top: 20px !important}
    .title{max-width: 280px !important;padding: 10px 0 !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 11px !important;left: 15px !important;}
    #vote2 .dot {top: 11px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 80px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    .headerImg{max-width: 200px !important;padding-top: 20px !important}
    .title{max-width: 200px !important;padding: 10px 0 !important;}
    .deal{max-width: 100px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 7px !important;left: 15px !important;}
    #vote2 .dot {top: 7px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 60px !important;}
}

/* ----------- iPhone 4 and 4S ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .headerImg{max-width: 170px !important;}
    .title{max-width: 160px !important;padding: 10px 0 !important;}
    .deal{max-width: 110px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 7px !important;left: 15px !important;}
    #vote2 .dot {top: 7px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 60px !important;}
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and {
    .headerImg{max-width: 240px !important;padding-top: 50px !important}
    .title{max-width: 240px !important;padding-bottom: 40px !important;padding-top: 15px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 9px !important;left: 15px !important;width: 10px !important;; height: 10px !important;}
    #vote2 .dot {top: 9px !important;left: 9px !important;width: 10px !important;; height: 10px !important;}
    .smartcapture-submit-button-wrapper{bottom: 90px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

When i remove !important from the media queries, none are picked up and instead only the default styles.

Any help greatly appreciated.

Thanks

Answer 1

Simply put your iPhone 4 @media rules before the iPhone 6 ones. So the iPhone 6 will then override iPhone 4 when the width is 375px or higher.

The rule below will apply when width is between 320px and 374px..

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {...}

The rule below will override when width is between 375px and 667px;

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

Answer 2

Erayner,

Media queries can be tricky...

If you have the iPhone 4 media query statements below the iPhone 6,7&8 media query statements, it will (in fact) override the iPhone 6,7&8 one because it's listed below it. The CSS file gets read top to bottom. For example:

<style>
.className {
  width: 50%;
}
.className {
  width: 100%;
}
</style>

the second .className with the width of 100% will take since it is last (being read from top to bottom).

Another reason it is overriding because the iPhone 4 media query has a range of 320px to 480px while the iPhone 6,7&8 one has a range that falls within the iPhone 4's range (375px to 667px). 375 through 480px fall in the iPhone 4's range...and since it is below the iPhone 6,7&8's code, it takes precedence...

Also, not sure why you have sooo many !important calls - May help us better to understand your particular situation better if you provide your entire css file to understand the ordering of your IDs and Classes.

Have you tried placing the iPhone 4's media query code above the iPhone 6,7& 8's? And if so, are you having the same issue?