Horizontal/In-line Image Layout

Product Support
1

Your software
My Mautic version is: 4.4.5
My PHP version is: 7.4.33
My Database type and version is: MySQL 5.7.40-43

I am trying to create a layout 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 and 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)

image

However in Gmail/Android (and also on the desktop when I reduce the viewport) the icons stack and look like this:

image

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:

CSS:

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