'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!

htmlmailermjml


Solution 1:[1]

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>

Solution 2:[2]

  <mj-social icon-padding="5px" icon-size="40px">
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/943d32d4-61a8-4459-9091-daf7014d0769/64x64.png">
          </mj-social-element>
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/4d5d6666-fd8c-4826-9e57-b8a70799cfba/64x64.png">
          </mj-social-element>
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/3b59c8d5-afd9-4535-b269-fbb5d2449936/64x64.png">
          </mj-social-element>
</mj-social>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 josegp
Solution 2 iniubong Obonguko

Related Questions