Incorrect Media Query gets applied on html elements

Question

I have a class written for 2 set of devices(media query) iphone 6/7/8 and iphone X.

the attribute of class are similar except the measurement.

Now here, If I have written media query for iphone 6/7/8 first and media query of iphone X the last, then the media query of later one applies and same is the case if I reverse the order of those media query.Below are the details:

@media only screen and (min-width: 375px) and (max-width: 812px) {
    .datepicker.dropdown-menu{
        width: 312px !important;
        /* font-family: "Avenir_Book" !important; */
        height:319px !important;
        box-shadow:none !important;
        top:305px !important;
        border-radius:16px !important;
        padding:0px 0px 0px 0px !important;
    }

    .table-condensed {
        width: 310px !important;
    height:294px !important;
    }

    .datepicker table tr td {
        width: 30px !important;
    }

    .table-condensed tr {
        width: 255px !important;
        height: 39px;
    }

    .datepicker-days table thead {
        width: 260px !important;
    }

    .datepicker-days table tbody {
        width: 210px !important;
    }
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {
    .datepicker.dropdown-menu{
        width: 310px !important;
        /* font-family: "Avenir_Book" !important; */
        height:319px !important;
        box-shadow:none !important;
        top:160px !important;
        border-radius:16px !important;
        padding:0px 0px 0px 0px !important;
    }

    .table-condensed {
        width: 308px !important;
    height:294px !important;
    }

    .datepicker table tr td {
        width: 30px !important;
    }

    .table-condensed tr {
        width: 255px !important;
        height: 39px;
    }

    .datepicker-days table thead {
        width: 260px !important;
    }

    .datepicker-days table tbody {
        width: 210px !important;
    }
}

I understand its the generic rule of CSS in which what comes the last will get applied unless other one is marked important. But here I have "!important" on both media queries. What should be the solution for this?

JSFiddle: jsfiddle.net/2cwwe0p4/20.

Answer 1

As you said, CSS works in a way from top to bottom giving last more preference over first. Your problem is that you need some styles to be overridden(as I have understood) for Iphone X(max-width: 812px). The solution could be to structure your CSS in a way that all styles are applied for "@media only screen and (min-width: 375px) and (max-width: 812px)" and should be written first in Css file. For rest of the styles which needs to be overwritten for iphone 6/7/8 (max-width: 667px) should be written below in CSS File (idea is make code generic as much possible, and change styles for Iphone 6/7/8 when max-width : 667 is reached).

Refer https://jsfiddle.net/gmbqLk5c/40/ fiddle for details. Details are I have applied red border to table in general. But when max-width : 667px, I have overwritten the border-color: Blue. Henceforth, Iphone X will show Red border but below devices will show Blue border(without using !important).

<div class="container datepicker">
  <table class="mt-2 table table-condensed">
    <tbody>
      <tr>
        <td>
          Sweden
        </td>
        <td>
          13:00
        </td>
         <td>
         South Korea
        </td>
      </tr>
      <tr>
        <td>
          Bolivia
        </td>
        <td>
          16:00
        </td>
         <td>
         Guam
        </td>
      </tr>
         <tr>
        <td>
          is
        </td>
        <td>
          23:00
        </td>
         <td>
         Hell
        </td>
      </tr>
    </tbody>

  </table>



</div>
<style>
@media only screen and (min-width: 375px) and (max-width: 812px) {

    .datepicker table tr td {
        border: solid 1px red;
     }
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {

    .datepicker table tr td {
        border: solid 1px blue;
    }
}
</style>