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

Question

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

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

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>

Hello, I am sorry I should have included that earlier. I have edited the post and added the picture of how I would like it to show up on mobile — DataAnalystByNight, Aug 31 '22 at 02:05

score 0 · Accepted Answer · answered Aug 31 '22 at 05:40

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

Wow man it works, You are great. The only thing is my text editor VS code is underlining the It is saying that the "mj-group cannot be used inside mj-column, only inside: mj-attributes, mj-section" Is this something I should be concerned about? I didn't even think this would work which is why I didn't make an attempt, but even though it is showing an underline error, it is actually working still. — DataAnalystByNight, Aug 31 '22 at 18:49
I don't use MJML day-to-day, but I have tested the output in Litmus and it works. Looking at the output code, it's just divs and tables within divs and tables, so it's okay. It's just not designed to do it normally, hence the error message. It could be done more efficient, code-wise (but is fine). (A case for a custom component, if you use it a lot) — Nathan, Sep 01 '22 at 00:23

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

1 Answers1