Почему моя маржа css не работает в моем медиа-запросе?

Question

Я пытаюсь создать подпись электронной почты, чтобы на мобильном телефоне верхняя часть текста совпадала с фотографией.В настольной версии у меня максимальный размер 32px и 0px с медиа-запросом.Любая подсказка, почему мой медиа-запрос не работает?

@media only screen and (max-width: 500px) {
  .mobile {
    visibility: hidden;
    display: none;
  }

  .mtext {
    margin-top:0px; !important
    padding:0px; !important
  }
}

<table width="100%" border="0" style="font-family:Arial, Helvetica,sans-serif;font-size:12px; margin-left:10px; margin-right:10px;">
   <tr>
      <td width="100" valign="top" align="left">
         <img width="100px" src="https://www.pkallsc.org/wp-content/uploads/2018/04/Headshot-Jeffrey-Ashley-square-e1522622432938.jpg"  style="float:left;" alt="John Smith" />
      </td>
      <td width="1249" valign="top" style="text-align:left; margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:16px;" align="left">
         <p class="mtext" style="margin-left:10px; margin-top:32px; font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left;"> <strong>John&nbsp;Smith</strong>
            <br />Chief Executive Officer<br /> 123 Central Suite, Suite 510 |&nbsp;Alpharetta, Georgia 30022<br /> T 800.800.8808 | D 800.800.0236&nbsp;|&nbsp;F 800.800.2704
         </p>
      </td>
   </tr>
   <tr>
      <td colspan="3">
         <div class="mobile">
         <hr style="border: 1.5px solid #49DBC3; max-width: 550px; margin-left:0;" width="80%" align="left">
         <div>
   <tr> <td colspan="9" align="left"><div class="mobile"> 
   </div></td></tr><div> </div></div>
</table>

Answer 1

@media only screen and (max-width: 500px) {
  .mobile {
    visibility: hidden;
    display: none;
  }

  .mtext {
     margin-top:0px !important;
     padding:0px !important;
  }
}

Если вам нужно использовать !important, это должно быть раньше ;