I am trying to create a layout in Mail Jet Markup whereby I have a section and column that contain social media icons and present them in a horizontal row. I am able to get it to render fine in Outlook and other desktop clients as well as web browsers. However, despite trying many workarounds, Gmail stacks the icons in a vertical row.
Here is my intended result (which looks fine in a browser and other mail clients)
Browser Screengrab (desired result with in-line images)
In Gmail/Android, though (and also on the desktop when I reduce the viewport), the icons stack and look like this:
Mobile Screengrab (undesired result with images stacking)
I suspect it has to do with the responsive/liquid layout of mobile.
So I tried to solve with some CSS. Here is the CSS and HTML code I am using but it is not doing the trick:
'<mj-style>
.social {
float: right;
display: inline-block;
white-space: nowrap;
}
</mj-style>'
Here is the HTML (I am simply applying the CSS class to the individual social icon images):
<!-- BEGIN HEADER SOCIAL ICONS -->
<mj-section width="600px" height="35px" padding-top="0" padding-bottom="0" padding-left="0" padding- right="0" background-color="#5a90cc">
</mj-section>
<mj-section background-color="#5a90cc" padding-top="0" padding-bottom="0">
<mj-column width="465px">
<mj-image css-class="social" width="465px" src="https://mautic.inpowermovement.org/media/images/spacer.png" id="iqwmnb" padding-bottom="5px" title="Spacer" padding-right="0" padding-left="0" padding-top="5px" height="25px"/>
</mj-column>
<mj-column width="30px">
<mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/fb_yl.png" padding-bottom="5px" id="i23thx" alt="Facebook" padding-right="5px" padding-left="0" padding-top="5px" height="25px"/>
</mj-column>
<mj-column width="30px">
<mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/ig_yl.png" padding-bottom="5px" alt="Instagram" id="ih0yev" padding-right="0" padding-left="0" padding-top="5px" height="25px"/>
</mj-column>
<mj-column width="30px">
<mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/yt_yl.png" padding-bottom="5px" alt="YuoTube" id="ik0wpg" padding-right="5px" padding-left="0" padding-top="5px" height="25px"/>
</mj-column>
<mj-column width="45px">
<mj-image css-class="social" width="25px" src="https://mautic.inpowermovement.org/media/images/tg_yl.png" padding-bottom="5px" alt="Telegram" id="i44d84" padding-right="20px" padding-left="0" padding-top="5px" height="25px"/>
</mj-column>
</mj-section>
<mj-section width="600px" height="35px" padding-top="0" padding-bottom="0" padding-left="0" padding-right="0" background-color="#5a90cc">
</mj-section>
<!-- END HEADER SOCIAL ICONS -->
Any help is greatly appreciated!!!
You can easily do this using the mj-social tag, check code:
I also recommend reading basic MJML docs: https://documentation.mjml.io/
MJML live editor: https://mjml.io/try-it-live/rwY8cDMgej
<mj-section background-color="#5a90cc">
<mj-column>
<mj-social padding="0px 20px" align="right">
<mj-social-element padding="5px" icon-size="25px" icon-height="25px" border-radius="118px" src="https://mautic.inpowermovement.org/media/images/fb_yl.png" href="https://www.google.com/" alt=""></mj-social-element>
<mj-social-element padding="5px" icon-size="25px" icon-height="25px" border-radius="118px" src="https://mautic.inpowermovement.org/media/images/ig_yl.png" href="https://www.google.com/" alt=""></mj-social-element>
<mj-social-element padding="5px" icon-size="25px" icon-height="25px" border-radius="118px" src="https://mautic.inpowermovement.org/media/images/yt_yl.png" href="https://www.google.com/" alt=""></mj-social-element>
<mj-social-element padding="5px" icon-size="25px" icon-height="25px" border-radius="118px" src="https://mautic.inpowermovement.org/media/images/tg_yl.png" href="https://www.google.com/" alt=""></mj-social-element>
</mj-social>
</mj-column>
</mj-section>