Текст электронной почты HTML не отображается правильно в Gmail Mobile

Я наконец-то в точке, где мое письмо отлично смотрится во всех клиентах ... Кроме Gmail Mobile. В частности, он нажимает на мои ссылки на панели навигации и нижние колонтитулы (которые являются таблицами) слева, а не центрирует их.Текст электронной почты HTML не отображается правильно в Gmail Mobile

Любые советы?

Nav штрих-код:

<td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES 
 
           </a></td> 
 
          <td width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES 
 
           </a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </tbody> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table>

И моя сноска похожа на это, за исключением использования ссылки на изображения вместо текста.

источник

2016-07-03 S. White

Посмотрев на свой код, кажется, что вы использовали атрибут , чтобы центрировать стол. Я бы предложил использовать CSS вместо атрибутов HTML. Вы можете использовать свойство CSS margin:0 auto; для центровки таблицы в ее родительском контейнере.

Пожалуйста, смотрите ниже обновленный код:

<table class="ecxw320" align="center" border="0" cellpadding="0" cellspacing="0" width="640"> 
 
    <tbody> 
 
    <tr bgcolor="#000000"> 
 
     <td height="50"> 
 
     <!--Use margin:0 auto; to center a table within it's parent container--> 
 
     <table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0"> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0"> 
 
        <tbody> 
 
        <tr> 
 
         <td width="20"> 
 

 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 

 
       <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TEES 
 
           </a> 
 
       </td> 
 
       <td width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TANKS</a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">ACCESSORIES 
 
           </a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">SALE</a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

источник

2016-07-03 08:48:16

Извиняюсь, я не включил полный код в моем вопросе, и не включаю скриншот текущего эффекта. Вот полный код: [link] (http://paste.ofcode.org/JQS3ykcP7aB9GsZ82Jcu2g) Вот скриншот того, как он отображается в приложении Gmail: [link] (https://cdn.shopify.com /s/files/1/1041/0020/files/IMG_1284.PNG?6670755951936836937) –

@ S.White просто хотел узнать, испробовали ли вы margin: 0 auto; 'на внутренней таблице. Также я бы предложил использовать его вместо атрибута 'align =" center "' во всех таблицах, вы хотите центрировать. См. Выше обновленный ответ. –

Я пробовал новый код, он полностью решил проблему со странным правым полем в Gmail и отлично выглядит на других клиентах. Я также применил тот же раздел кода для панели нижнего колонтитула, и теперь он отлично работает. Моя единственная проблема после добавления этих фрагментов - это тонкий вид панели в приложении Gmail - она была решена с небольшим отступом. Спасибо, что пришли на помощь! :-) –

Текст электронной почты HTML не отображается правильно в Gmail Mobile

ответ

Смежные вопросы