# Horizontal/In-line Image Layout

**URL:** <https://forum.mautic.org/t/horizontal-in-line-image-layout/31944>\
**Category:** Product Support\
**Created:** [May 2, 2024, 2:19pm UTC](https://forum.mautic.org/t/horizontal-in-line-image-layout/31944 "2024-05-02T14:19:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![riverbear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/riverbear/32/9207_2.png) [@riverbear](https://forum.mautic.org/u/riverbear)\
**Post date:** [May 2, 2024, 2:19pm UTC](https://forum.mautic.org/t/horizontal-in-line-image-layout/31944/1 "2024-05-02T14:19:05Z")

</div>

**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](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/0/0492f25ccc34c8b947a0783d50d0dbf49d86c258.png)

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

![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/8/8ca09cf1f7170543a25ae42e7a3e1fc385d7bf45.png)

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!