как установить 2 кнопки в 2 таблицах 1 под другой на мобильном телефоне, HTML-шаблон Django - PullRequest
Новая
       48

как установить 2 кнопки в 2 таблицах 1 под другой на мобильном телефоне, HTML-шаблон Django

0 голосов
/ 10 января 2019

Мой HTML будет отправлен по электронной почте через службу электронной почты. так что он будет читаться / отображаться в Gmail, Yahoo Mail, Outlook и т. д. Вот почему я не могу использовать inline-flex. (Я пытался делать классы, используя максимальную ширину, но они игнорируются). Это то, что у меня есть в моем файле, который я включаю, где это необходимо: 

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
    <tr>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;margin: 30px 0 30px 60px; height: 45px;" class="mobileWidth100 mobilePadding0">
                <a width="auto" href="{{extra.manage_team}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Manage Team'%}</a>
            </div>
        </td>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;">
                <a width="auto" href="{{extra.billing_overview}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Billing Overview'%}</a>
            </div>
        </td>
    </tr>
</table>

Вот так это выглядит на рабочем столе, что отчасти нормально (мне нужно будет перенести первую кнопку слева):

enter image description here

И вот как это выглядит на мобильном телефоне, как вы можете видеть, явно сломано:

enter image description here

Все, что я хочу, это иметь 1 объект один рядом с другим, а затем на мобильном телефоне, второй, чтобы спуститься, и оба иметь одинаковую ширину с родителями

Ответы [ 3 ]

0 голосов
/ 10 января 2019

Просто наполовину, у вас должен быть резервный шрифт для Lato, который не будет работать с Outlook, Gmail или несколькими другими почтовыми клиентами, которые не поддерживают веб-шрифты.

Если текст для вашей кнопки состоит из двух строк, вам потребуется перенастроить его, чтобы он хорошо выглядел в Outlook. Кнопке никогда не нужно две строки. Это хороший шаблон для продвижения вперед.

Прежде всего, вам нужен медиа-запрос: 

<style>
  @media screen and (max-width: 600px) {
    .stack-in-mobile {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
</style>

Далее вам понадобится контейнер таблицы для вашей электронной почты.

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

<table>
  <tr>
    <td class="stack-in-mobile">
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
        <tr>
          <td style="border-radius: 6px; background: #24b646;">
            <a href="#" target="_blank" style="background: #24b646; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 22px; color: #ffffff; display: block; border-radius: 6px; letter-spacing: 1px;">Manage Team</a>
          </td>
        </tr>
      </table>
    </td>
    <td class="stack-in-mobile">
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
        <tr>
          <td style="border-radius: 6px; background: #ffffff;">
            <a href="#" target="_blank" style="background: #ffffff; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 12px; color: #24b646; display: block; border-radius: 6px; letter-spacing: 1px;">Billing Overview</a> 
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Я оставлю вас, чтобы оформить остальное.

Удачи.

0 голосов
/ 15 января 2019

Это то, что заставило его работать после всех этих попыток: 

 <table cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center" style="overflow-x:auto;margin: 30px 60px 0px 60px; width: calc(100% - 120px);">
<tr>
    <td>
      <table style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 20px;">
        <tr>
          <td
            align="left"
            style="width: 180px;min-width: 50%;max-width: 100%"
          >
            <div
              align="center"
              style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;height: 45px;"
            >
              <a
                width="auto"
                href="{{ extra.manage_team }}"
                target="_blank"
                alias=""
                style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;"
                >{% trans 'Manage Team'%}</a
              >
            </div>
          </td>
        </tr>
      </table>

      <table style="display: inline-block; vertical-align: middle;margin-bottom: 20px;">
        <tr>
          <td
            align="left"
            style="width: 180px;min-width: 50%;max-width: 100%"
          >
            <div
              align="center"
              style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;"
            >
              <a
                width="auto"
                href="{{ extra.billing_overview }}"
                target="_blank"
                alias=""
                style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;"
                >{% trans 'Billing Overview'%}</a
              >
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>

0 голосов
/ 10 января 2019

Может быть, глупый вопрос. Но вы использовали внешний источник CSS? И много CSS не может быть использовано в шаблоне электронной почты. это из шаблона, который я сделал и должен работать в вашем случае использования. 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 " />
    <meta name="format-detection" content="telephone=no"/>
    <style type="text/css">
        body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; font-family: 'ubuntu', Helvetica, Arial, sans-serif; }
        table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;}
        .table-button a:visited { color: #fff; }
        .table-button a:hover { text-decoration: underline; }
        .no_m { margin: 0px;}
        @media only screen and (min-width:481px) and (max-width:649px) {
            .em_main_table { width: 100% !important; }
            .em_wrapper { width: 100% !important; }
            .em_hide { display: none !important; }
            .em_full_img { width: 100% !important; height: auto !important; }
            .em_center { text-align: center !important; }
           
            .em_h20 { height: 20px !important; }
            .em_ptop { padding-top: 20px !important; }
            .em_pbottom { padding-bottom: 20px !important; }
            .em_pad1 { padding: 20px 10px !important; }
            .header1_pad { padding: 0px 10px 20px 0px !important; }
            .em_hauto { height: auto !important; }
            .dimensions_30012018 { width: 100% !important; height: auto !important; }
            .em_data-tablet { display: table-cell !important; }
        }
        @media screen and (max-width: 649px) {
            .em_block { display: table-row !important; }
            .top-half { width: 50% !important;}
            .mobile_button { width: 100% !important; display: inline-block !important; padding: 5px 0px !important;}
        }
        @media screen and (max-width: 480px) {
            .em_main_table { width: 100% !important; }
            .em_wrapper { width: 100% !important; }
            .em_hide { display: none !important; }
            .em_center { text-align: center !important; }
            .em_hide1 { display: none !important; }
        }
    </style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#f3f8fc">
<table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">
            <table role="presentation" align="center" width="650" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:650px; table-layout:fixed;" bgcolor="#f3f8fc">

                <tr>
                <td mc:edit="zorgexpert" valign="top" align="center" style="padding:35px 25px 35px 25px; background-color:#ffffff;" class="em_pad1" bgcolor="#ffffff">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                        <tbody>
                            <tr>
                                <td align="center" class="em_black em_m_l" colspan="2" style="font-family:ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#333333;padding:11px 0px 19px;" valign="top">
                                    <table role="presentation"  align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                        <tr>
                                            <td colspan="2" align="center">
                                                <table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td class="mobile_button">
                                                            <a class="em_link_nu" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
                                                                <table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#04A0DA;border-radius:6px;" class="table-button table-button-bl em_wrapper">
                                                                    <tr>
                                                                        <td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
                                                                             <span class="em_white" style="color: #ffffff; text-decoration: none;">
                                                                                 Button
                                                                             </span>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </td>
                                                        <td height="10" width="10px" class="em_hide" style="height:10px; width:10px; line-height:0px; font-size:0px;">&nbsp;</td>
                                                        <td class="mobile_button">
                                                            <a class="em_link" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
                                                                <table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#F2922C;border-radius:6px;" class="table-button table-button-or em_wrapper">
                                                                    <tr>
                                                                        <td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
                                                                             <span class="em_white" style="color: #ffffff; text-decoration: none;">
                                                                                 Button
                                                                             </span>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
</body>
...