News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

In-line Social Icons Turned Vertical in Email

Started by njtweb, April 12, 2019, 11:43:22 AM

Previous topic - Next topic

njtweb

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.

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

Sesquipedalian

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.

Advertisement: