Qurel
@Qurel

Как сверстать в 2 кнопки для письма?

Есть две кнопки, которые должны быть в одну линию по краям письма в десктопной версии:
5dd67ab0a023a471815969.png
В мобильной версии стоять по центру друг под другом:
5dd6750d7b037545938780.png

На данный момент есть такой адаптивный вариант:
<!-- Две кнопки -->
   <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width: 570px;">
                  <tr>
                        <td style="padding: 10px;max-width: 46%;width: 100%;display: inline-block;">
                              <a href="#" style="height: 40px;line-height: 40px;padding: 0 15px; display: inline-block;background-color: dodgerblue;"></a>
                          </td>
                          <td style="padding: 10px;max-width: 46%;width: 100%;display: inline-block;">
                                <a href="#" style="height: 40px;line-height: 40px;padding: 0 15px; display: inline-block;background-color: dodgerblue;"></a>
                           </td>
                      </tr>
                </table>
         </td>
    </tr>

Но кнопки не прижаты к краям письма:
5dd67abf3b4cf394164149.png
  • Вопрос задан
  • 207 просмотров
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Ответ написан
Комментировать
@maximkinn
азъ есмъ
Вот да, используйте mjml.io

Код простейший

<mjml>
  <mj-body>


    <mj-section>
      <mj-column width="200">
        <mj-button background-color="black" color="white" href="http://toster.ru">
          mjml me!
        </mj-button>
      </mj-column>

      <mj-column width="200">
        <mj-button background-color="black" color="white" href="http://toster.ru">
          mjml me!
        </mj-button>
      </mj-column>
    </mj-section>


  </mj-body>
</mjml>


5ddf72e352e3f005755077.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы