Hey there,

I've got an email that works perfectly except for one issue with a border-right inline property, it is being overwritten by the media query max-width 640px only in android 5.1 and 6.0. It's isn't a problem in android 4.4. It seems that android 5.1 + is applying the media query style for smaller screens but it shows the design at full screen. I need the media query style to apply for smaller screens, but obviously not android as it is showing the desktop design - which is fine.

Any help would be much appreciated as I can't see how I need to fix it.

Thanks in advance

Here's my code:


<!--   THREE CELLS -->
        <tr>
          <td bgcolor="#ffffff" style="padding: 10px 0">
            <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
              <tr class="table-holder2">
                <th class="thead" width="66.6%">
                  <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="mob-height-brd-none" width="50%" height="142" style="font:12px Verdana, Helvetica, sans-serif; line-height:18px; color: #5d5d5c; padding: 10px 6px; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; text-align: center">
                          Financial Conduct<br>Authority Registration no. <br>689378
                        </td>
                        <td class="mob-height-brd-none" width="50%" height="142" style="font:13px Verdana, Helvetica, sans-serif; line-height:18px; color: #5d5d5c; padding: 10px 10px; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; text-align: center">
                          <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                              <td style="font:12px Verdana, Helvetica, sans-serif; line-height:18px; color: #5d5d5c; text-align: center">Our customers rated us</td>
                            </tr>
                            <tr>
                              <td style="padding: 7px 0 4px; text-align: center">
                                <img border="0"
                                     src="5-stars.png"
                                     width="143"
                                     height="27"
                                     alt="Rate"
                                     style="vertical-align:top;"/>
                              </td>
                            </tr>
                               <tr>
                              <td style="padding: 7px 0 4px; text-align: center">
                                <img border="0"
                                     src="trustpilot-logo.png"
                                     width="142"
                                     height="17"
                                     alt="Rate"
                                     style="vertical-align:top;"/>
                              </td>
                            </tr>
                          </table>
                          <br><span style="line-height: 22px; color: #4a4a4a;">As of 23/02/17</span>
                        </td>
                      </tr>
                    </tr>
                  </table>
                </th>


And the media query :

 @media only screen and (max-width: 640px) {

      tr[class="table-holder2"] {
        display: table !important;
        width: 100% !important;
      }

      tr[class="table-holder2"] th[class="thead"] {
        display: table-header-group !important;
        width: 100% !important;
      }

      tr[class="table-holder2"] th[class="thead"] table{
        margin: 0 0 10px !important;
      }

      tr[class="table-holder2"] th[class="tfoot"] {
        display: table-footer-group !important;
        width: 100% !important;
      }

      td[class="mob-height"]{
        height: 90px !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 15px !important;
      }

      td[class="mob-height-brd-none"]{
        height: 143px !important;
        border-right: none !important;
      }
    }