Как сделать шаблон электронной почты отзывчивым на мобильном телефоне?

Question

У меня есть шаблон электронной почты, который мне нужно обновить. Я должен сделать правильное изображение, показанное внизу под идентификатором ремонта, когда оно просматривается только в мобильном телефоне. На данный момент я пробовал медиа-запросы, но мне не повезло, но, возможно, я не использовал правильно. Хотелось бы, чтобы решение было более отзывчивым.

<style>
    @media (max-width: 480px){
        #productimage { 
        position: relative ;
        top: 200px; 
        left: -100px;
        }
    }    
</style>

<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;">
    <tbody>
        <tr>
            <td height="15">
                <div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;">
                    <div class="top-mar-logo" style="text-align: center;padding: 40px 0px;">
                    <p>Dear [ADMIN NAME],</p>
                    <p>[FIRST NAME] has sent a repair piece. Please check the details below</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td align="" style="border:0px solid #999999;">
                <table border="0" width="100%">
                    <tbody>
                        <tr>
                            <td valign="top" width="60%">
                                <table border="0" cellpadding="4" cellspacing="" width="100%">
                                    <tbody>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Name</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[FIRST NAME] [LAST NAME]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Email</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[EMAIL]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Product Name</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[PRODUCT NAME]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Purchased On</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[DATE]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Return Reason</strong></span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[CUS NOTE]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Repair ID</strong></span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[REPAIR ID]</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td align="center" width="40%" id="productimage"><img src="[PRODUCTIMAGE]" alt="" width="100%" height="250px" class="fr-fic fr-dii"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Не уверен, что использовать.

Answer 1

Надеюсь, это может вам помочь.

Пожалуйста, не забудьте добавить <meta name="viewport" content="width=device-width, initial-scale=1"> в заголовок.

@media (max-width: 480px){
  .table-row{
    display: block;
  }
  #productimage { 
    position: relative ;
    display: block;
    width:100%;
      }
    }

<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;">
    <tbody>
        <tr>
            <td height="15">
                <div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;">
                    <div class="top-mar-logo" style="text-align: center;padding: 40px 0px;">

                        <p>Dear [ADMIN NAME],</p>

                        <p>[FIRST NAME] has sent a repair piece. Please check the details below</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td align="" style="border:0px solid #999999;">

                <table border="0" width="100%">
                    <tbody>
                        <tr class="table-row">
                            <td valign="top" width="60%">

                                <table border="0" cellpadding="4" cellspacing="" width="100%">
                                    <tbody>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Name</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[FIRST NAME] [LAST NAME]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Email</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[EMAIL]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Product Name</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[PRODUCT NAME]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Purchased On</strong>&nbsp;</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[DATE]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Return Reason</strong></span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[CUS NOTE]</span></td>
                                        </tr>
                                        <tr>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Repair ID</strong></span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
                                            <td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[REPAIR ID]</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td align="center" width="40%" id="productimage"><img src="[PRODUCTIMAGE]" alt="img here" width="100%" height="250px" class="fr-fic fr-dii"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>