Advertisement:

Author Topic: In-line Social Icons Turned Vertical in Email  (Read 377 times)

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 845
In-line Social Icons Turned Vertical in Email
« on: April 12, 2019, 11:43:22 AM »
This code works in all browsers on my website horizontally, as it should.

But when I configure it for a newsletter and send it out it is received vertically in the newsletter in gmail and godaddy webmail clients. Probably the same in all email clients. Why is it getting turned vertical?

Thank you to all in advance.

Code: [Select]
<div align="center">
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="Instagram"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="Facebook"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="Twitter"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="Youtube"></a></div>
</div>
« Last Edit: April 12, 2019, 12:11:41 PM by njtweb »

Online Sesquipedalian

  • The Mad Doctor
  • Lead Developer
  • Sr. Member
  • *
  • Posts: 872
  • Gender: Male
  • It works! ... in theory.
    • Sesquipedalian on GitHub
Re: In-line Social Icons Turned Vertical in Email
« Reply #1 on: April 13, 2019, 10:48:02 PM »
Email support for the full CSS specifications is unreliable at best. Since the nested div elements are all displayed as inline-blocks anyway, why not just replace them with span elements? That might confuse email clients less.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.