Отзывчивый внешний вид электронной почты не центр

0

Привет, У меня проблема с внешним видом, не центрирующим мою таблицу. он состоит из двух столбцов, которые выровнены по левому краю. Они центрируются в gmail и Outlook на рабочем столе, но не на мобильных устройствах. Я думаю, что выравнивание слева в двух столбцах дает мне проблему. Пожалуйста, помогите мне.

          <table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
          <tr>
          <td align="center" class="middle">
          <div align="center">
        <center>
        <!--[if mso]>
        <table style="width: 300px;"><tr><td>
        <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
                      <img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
                  </tr></table>
  <table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                  <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                </tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
                                    <td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"><a href="mailto:[email protected]" style="color: #fff; text-decoration: none; font-size: 12px; display: block; padding: 5px 0 0;">[email protected]</a></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                  <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                </tr>


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

</center>
</div>
          <table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
           <tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
            </tr>
          <tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">

                <a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
                <img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
              </td>
            </tr></table></td>
            </tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
            </tr></table><!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]--></td>
      </tr>
Теги:
email
outlook

1 ответ

0

То, что вы хотите сделать, это использовать Media Query, чтобы проверить, меньше ли размер экрана, чем определенный размер, для отображения гибких макетов. например:

@media only screen and (max-width: 500px;) {
    //Responsive CSS styling
}

Используя это, вы можете центрировать эти таблицы так же, как с обычной веб-страницей. например:

@media only screen and (max-width: 500px;) {
    td[class="responsive-align"] {
        margin: 0 auto !important;
        float: none !important;
        align: center !important; //If this line centers your text, remove it.
    }
}

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

По моему опыту с отзывчивыми проектами и Outlook особенно вам нужно выложить свои таблицы, как это для них, чтобы эффективно упасть:

<table align="left">
    <tr>
        <td>
        </td>
    </tr>
</table>
<table align="right">
    <tr>
        <td>
        </td>
    </tr>
</table>

С Outlook лучше всего убедиться, что у вас есть 5 5px или больше между двумя таблицами, чтобы он мог добавить собственный интервал (о том, что вы ничего не можете сделать). Таким образом, для таблицы шириной 600px вы будете иметь каждую из ваших таблиц шириной 295px для достаточного количества интервалов.

Надеюсь это поможет :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню