0

Is it possible to make button stick to bottom of a column in an responsive HTML email?

Currently I am using MJML and able to achieve it on desktop version. Something like this: (This is what I want, so stop giving answer that result in something different desktop output then the following)

enter image description here

The problem is that in mobile view, the button is not sticking with the text.

enter image description here

Here is my MJML code

I am using MJML, but answer that needs raw HTML and CSS is also welcomed, as long as it works in all major email client.

cytsunny
  • 4,838
  • 15
  • 62
  • 129

4 Answers4

3

UPDATE: MJML 3.3.3 is now available, so it works in the try it live

So this work with MJML 3.3.3(beta 3 for now), so it doesn't work in current mjml try it live :

<mjml>
  <mj-head>
    <mj-style inline="inline">
      div[style*="height:400px"] {
        height: inherit !important;
      }
    </mj-style>
    <mj-style>
      @media only screen and (min-width:480px) {
        .equal-text {
          height: 400px !important;
        }
        .equal-text td {
          vertical-align: top;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
          <mj-button>Testing testing testing</mj-button>
        </mj-column>
        <mj-column>
          <mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, in iaculis nibh. Suspendisse id odio urna. Cras nisi ipsum, mattis in dui id, pretium tincidunt purus. Mauris mi diam, molestie ac facilisis sed, scelerisque sit amet enim. .</mj-text>
          <mj-button>Testing testing testing</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Some insights : you have to set a height for mj-text to keep both column with same height. It's only a trick to achieve this because both div are independent and there's no way to achieve this in email with current MJML markup. Problem is, it will have a "gap" between text & button on mobile when column has less that 400px of text.

So... we're tweaking the output HTML a bit with a media query ( since almost every desktop client support them anyway ) :

  • setting height to initial to have a mobile version without any height
  • add a media query to add the heigh back.

Why keeping the height="400px" on the mj-text ? MJML generate some outlook conditionnals table when an height is set on mj-text : so we're keeping outlook compatibility with this :)

Side note: on your intial markup you have mj-text in a section, you have to put a column even if you have only one in a section.

Here's a small litmus link for compatibility https://litmus.com/checklist/emails/public/8b29552

iRyusa
  • 384
  • 2
  • 13
  • Putting in height (also as conditional stateements) will be the best bet so the buttons in the columns stay in line. – Syfer May 23 '17 at 23:24
  • Um..... this works, but this involves knowing the actual height before hand. In my actual case, the length of text is unknown as this is going to be input by user. +1 , but thinking if I should start a new question / start a bounty before I marked it as correct answer. – cytsunny May 24 '17 at 03:25
  • Those column are 2 separate div, and make it equals height within an email context would be hard. You could use a mj-table and heavy lift with media queries. – iRyusa May 30 '17 at 13:12
0
<style>
  @media screen and (max-width: 480px) {
    .stack-column {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      direction: ltr !important;
    }
  }
</style>

<body>
  <table>
    <tr>
      <td colpsan="2" style="font-size:20px; color:#F45E43; font-family: helvetica;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
      </td>
    </tr>

    <tr>
      <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
          <!--[if mso]>
          <table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
          <tr>
          <td align="center" valign="top" width="660">
          <![endif]-->
          <table role="presentation" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
              <tr>
                  <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                      <!--[if mso]>
                      <table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                      <tr>
                      <td align="left" valign="top" width="330">
                      <![endif]-->
                      <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
                          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
                              <tr>
                                <td style="font-size:20px; color:#F45E43; font-family: helvetica;">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <mj-button>Testing testing testing</mj-button>
                                </td>
                              </tr>
                          </table>
                      </div>
                      <!--[if mso]>
                      </td>
                      <td align="left" valign="top" width="330">
                      <![endif]-->
                      <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
                          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
                              <tr>
                                <td style="font-size:20px; color:#F45E43; font-family: helvetica;">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <mj-button>Testing testing testing</mj-button>
                                </td>
                              </tr>
                          </table>
                      </div>
                      <!--[if mso]>
                      </td>
                      </tr>
                      </table>
                      <![endif]-->
                  </td>
              </tr>
          </table>
          <!--[if mso]>
          </td>
          </tr>
          </table>
          <![endif]-->
      </td>
    </tr>


    <tr>
      <td colpsan="2" style="font-size:20px; color:#F45E43; font-family: helvetica;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
      </td>
    </tr>
  </table>
</body>
Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • This will make the email no longer responsive. Responsive email should have the column drop to new row on mobile device , with the button stick to the text. – cytsunny May 24 '17 at 03:21
  • I marked the columns that should stack with ``. You can either use media queries or wrap this in hybrid ghost tables to achieve this. – Ted Goas May 24 '17 at 04:38
  • Will remove -1 if you are able to change your code snippet to do what you said. – cytsunny May 24 '17 at 05:21
  • Updated with both media query and hybrid ghost tables. I ran this through Litmus and it worked in the popular email clients. – Ted Goas May 24 '17 at 12:07
-1

I'd suggest you to use <mj-table>. This way, you can add your button right below your text and it will keep this layout in mobile.

Snippet :

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-table>
            <tr>
              <td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
              </td>
              <td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, in iaculis nibh. Suspendisse
                id odio urna. Cras nisi ipsum, mattis in dui id, pretium tincidunt purus. Mauris mi diam, molestie ac facilisis sed, scelerisque sit amet enim. .
              </td>
            </tr>
            <tr>
              <td>
                <button>Testing testing testing</button>
              </td>
              <td>
                <button>Testing testing testing</button>
              </td>
            </tr>
          </mj-table>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Add styling as you whish !

Pierre Burton
  • 1,954
  • 2
  • 13
  • 27
  • First, to perform what you have made, mjml-group will be a better choice. Second, This is simply not a responsive email. Responsive email should have the column drop to new row on mobile device , with the button stick to the text. – cytsunny May 23 '17 at 10:41
-2

You need put buttons inside columns, but they don't will be on the same level https://yadi.sk/d/JfegGMD13JSFuA

grinmax
  • 1,835
  • 1
  • 10
  • 13