Search code examples
htmlresponsive-designhtml-emailmjmlresponsive-emails

MJML- is there a way to get text under two columns?

I am currently trying to get text to display under two columns in a section in the MJML email framework. The issue I am having is that I can put the text under 1 column or under the other. But I want to center this text under both columns in question. This needs to be done without breaking the mobile responsiveness. I have tried grouping them but the text disappears on mobile. I have also built a whole separate section to get it underneath but then is falls out of line when on mobile and it goes under the social icons instead of staying under the appstore and googleplay icons like I want it too.

This is what I want:

This is what I want

This is what I am getting. I am able to put text under each image but not under both centered like I want.

This is what I have

This is what I have

Does anyone know how to successfully do this. Like I said adding sections or grouping the items ends up destroying the responsiveness for mobile.

This is what I want it to look like stacked up on mobile.

What I want it to look like on mobile x

This is the code:

<mj-raw>
  <!-- Experimental Edited Social Links Section -->
</mj-raw>
<mj-section padding="0px 0px 0px 0px">
  <mj-column width="80px" padding="0px 0px">
    <mj-text font-family="'Open Sans',Helvetica,Arial,sans-serif" padding="0px" 
       align="center" font-size="10px" font-weight="700" line-height="20px" 
       color="#00bced">get to<br>know us!
    </mj-text>
  </mj-column>
  <mj-column width="110px">
    <mj-image padding="5px 7px" href="https://www.petsmart.com/" 
       src="/assets/appstore.png" width="96px" height="29px" />
    <mj-text align="center" line-height="20px" color="#002d3f" padding="0px" font- 
        size="10px">
        download the<span style="font-weight: 700"> FREE </span>PetSmart app
    </mj-text>
  </mj-column>
  <mj-column width="110px">
    <mj-image padding="5px 7px" href="https://www.petsmart.com/" 
       src="/assets/playstore.png" width="96px" height="29px" />
    <mj-text align="center" line-height="20px" color="#002d3f" padding="0px" font- 
      size="10px">
      download the<span style="font-weight: 700"> FREE </span>PetSmart app
    </mj-text>
  </mj-column>
  <mj-group width="300px">
    <mj-column>
      <mj-image padding="0" href="https://www.petsmart.com/" 
         src="/assets/treats_loyalty.png" width="51.33px" height="33px" />
      <mj-text font-family="'Open Sans',Helvetica,Arial,sans-serif" align="center" font- 
         size="10px" line-height="0px" color="#002d3f">
        loyalty
      </mj-text>
    </mj-column>
    <mj-column>
      <mj-image padding="0" href="https://www.petsmart.com/" src="/assets/instagram.png" 
         width="33px" height="33px" />
      <mj-text font-family="'Open Sans',Helvetica,Arial,sans-serif" align="center" font- 
         size="10px" line-height="0px" color="#002d3f">
        social
      </mj-text>
    </mj-column>
    <mj-column>
      <mj-image padding="0" href="https://www.petsmart.com/" src="/assets/location.png" 
         width="25px" height="33px" />
      <mj-text font-family="'Open Sans',Helvetica,Arial,sans-serif" align="center" font- 
          size="10px" line-height="0px" color="#002d3f">
        location
      </mj-text>
    </mj-column>
  </mj-group>
</mj-section>
<mj-section padding="0px 0px 30px 0px" border-bottom="1px solid #c9c9c9">
</mj-section>
Solution

  • So firstly you need to combine the two buttons into one column, because their layout will stay the same on desktop and mobile. That will prevent them separately stacking.

    Secondly, for the two buttons side by side, it looks like what you want is the mj-group component. That will not stack (https://documentation.mjml.io/#mj-group) Wrap the images in mj-columns, and then wrap all of that in a mj-group, with the text separate (underneath).

    That's all we need to change.

      <mj-column width="220px">
    <mj-group  width="100%">
      <mj-column>
        <mj-image padding="5px 5px" href="https://www.petsmart.com/" 
       src="https://via.placeholder.com/96x29" width="96px" height="29px" />
        </mj-column>
      <mj-column>
        <mj-image padding="5px 5px" href="https://www.petsmart.com/" 
       src="https://via.placeholder.com/96x29" width="96px" height="29px" />
        </mj-column>
      </mj-group>

    <mj-text align="center" line-height="20px" color="#002d3f" padding="0px" font-size="10px">
        download the<span style="font-weight: 700"> FREE </span>PetSmart app
    </mj-text>
  </mj-column>

    Ref: https://mjml.io/try-it-live/QiFDHwx-Y