Search code examples
htmlmailermjml

Inline images on mobile MJML

I am trying to create an email template using MJML. And I want to create an inline of images both on desktop and mobile. I wrote this code:

<mj-section background-color="#bce0a6">
       <mj-column>
       </mj-column>
       <mj-column>
       </mj-column>
       <mj-column>
        <mj-image src="https://xxxx.png" alt="Twitter icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://yyyy.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://zzzz.png" alt="Pinteres icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
      </mj-column>
      <mj-column>
      </mj-column>
      <mj-column>
      </mj-column>
    </mj-section>

This is the result in desktop version: This is the result in desktop version This is the result in mobile version: This is the result in mobile version

I want to make the icon images inline as well on the mobile version WITHOUT using the mj-social-element that MJML has since I would like to use the icon images I have and not the icon images the mj-social-element offers.

Is there a way for me to do it? Thanks!

NOTE: In the code I used so 2 empty <mj-column> in the top and bottom so that the icons are centered but if there is another cleaner way to do it please let me know!

Solution

  • Wrapping it up in a <mj-group> did the trick:

        <mj-section background-color="#bce0a6">
      <mj-group>
       <mj-column>
       </mj-column>
       <mj-column>
       </mj-column>
       <mj-column>
        <mj-image src="https://xxxx.png" alt="Twitter icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://yyyy.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://zzzz.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
      </mj-column>
      <mj-column>
      </mj-column>
      <mj-column>
      </mj-column>
     </mj-group>
    </mj-section>