title: How to make Email Template responsive on mobile?
body: <p>I have an email template that I need to update. I have to make the right image show at the bottom below repair id when it is viewed only in mobile. As of right now I have tried media queries but I had no luck but possible I didn't use correctly. Would love a solution to make it more responsive. </p>
  
  <pre><code>&lt;style&gt;
      @media (max-width: 480px){
          #productimage { 
          position: relative ;
          top: 200px; 
          left: -100px;
          }
      }    
  &lt;/style&gt;
  
  &lt;table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="background-image: url('https://www.marahlago.com/assets/images/ml-flower-watermark-.png'); background-repeat:no-repeat ;background-position:center;"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td height="15"&gt;
                  &lt;div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;"&gt;
                      &lt;div class="top-mar-logo" style="text-align: center;padding: 40px 0px;"&gt;
                      &lt;p&gt;Dear [ADMIN NAME],&lt;/p&gt;
                      &lt;p&gt;[FIRST NAME] has sent a repair piece. Please check the details below&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="" style="border:0px solid #999999;"&gt;
                  &lt;table border="0" width="100%"&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td valign="top" width="60%"&gt;
                                  &lt;table border="0" cellpadding="4" cellspacing="" width="100%"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Customer Name&lt;/strong&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[FIRST NAME] [LAST NAME]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Customer Email&lt;/strong&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[EMAIL]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Product Name&lt;/strong&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[PRODUCT NAME]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Purchased On&lt;/strong&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[DATE]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Return Reason&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[CUS NOTE]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;&lt;strong&gt;Repair ID&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;:&lt;/span&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"&gt;[REPAIR ID]&lt;/span&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td align="center" width="40%" id="productimage"&gt;&lt;img src="[PRODUCTIMAGE]" alt="" width="100%" height="250px" class="fr-fic fr-dii"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Not sure what to use.</p>