Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: njtweb on April 12, 2019, 11:43:22 AM

Title: In-line Social Icons Turned Vertical in Email
Post by: njtweb 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>

Title: Re: In-line Social Icons Turned Vertical in Email
Post by: Sesquipedalian 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.