Facebook/Twitter buttons displaying vertically.

I have added Facebook like and twitter buttons to my email using the online editor. I entered a couple of space between them but not a new line.

On gmail.com and yahoo.com the Facebook and twitter buttons display one above the other whereas in outlook 2010 they are side-by-side. I would prefer them side-by-side. Is this a display problem with Gmail and Yahoo or is there something I am missing.

Many Thanks

ZeroGravity ZeroGravity, 4 years ago

It seems {display: block;} that is added to the button image element.style is the culprit. Disabling this using firebug when previewing the email has the social buttons sitting side-by-side as they should.

Is there anyway to override or remove the {display: block;}?


Stig Stig, 4 years ago

Hi Darren,

I wonder if this might be happening because your template has the img { display: block; } hack implemented?

If so, you should be able to work around it by overriding this CSS for the Twitter and Facebook buttons inline.

Could you try pasting this into the source view in the editor, and see if it works correctly?

<tweet><img src="https://img.createsend1.com/img/social/tweet.png" border="0" height="20" title="Share via Twitter" alt="Share via Twitter" width="55" style="display: inline;" /></tweet> <fblike><img src="https://img.createsend1.com/img/social/fblike.png" border="0" height="20" title="Like this on Facebook" alt="Like this on Facebook" width="51" style="display: inline;" /></fblike>

The Campaign Monitor Blog – HTML email smarts to go with your good looks.
ZeroGravity ZeroGravity, 4 years ago

Thanks Stig. That works. I created my template using the template builder then downloaded a copy and made some customizations, then imported it back into CM. I used the Insert->Social Sharing option in the editor to insert the buttons. This is the code it put in the email.

    <a class="cs-editor-fblike" href="http://cp.zerogravitywebworks.com/t/r-fb-oiubtd-l-l/"><img alt="Facebook Like Button" border="0" class="cs_editor_default_social" height="20" src="https://img.createsend1.com/img/social/fblike.png" title="Like this on Facebook" width="51" /></a>&nbsp;&nbsp;<a class="cs-editor-tweet" href="http://cp.zerogravitywebworks.com/t/r-tw-oiubtd-l-l/"><img alt="Tweet Button" border="0" class="cs_editor_default_social" height="20" src="https://img.createsend1.com/img/social/tweet.png" title="Share via Twitter" width="55" /></a></p>

and this is what I end up with when I preview the email.

<p style="margin-bottom:15px;" >
    <a href="http://cp.zerogravitywebworks.com/t/r-fb-oiubtd-l-q/"  rel="cs_facebox" style="color:#2f82de;text-decoration:underline;" ><img src="https://img.createsend1.com/img/social/fblike.png" border="0" title="Like this on Facebook" alt="Facebook Like Button" width="51" height="20" style="outline-style:none;text-decoration:none;display:block;max-width:100%;" /></a>&nbsp;&nbsp;<a href="http://cp.zerogravitywebworks.com/t/r-tw-oiubtd-l-f/" style="color:#2f82de;text-decoration:underline;" ><img src="https://img.createsend1.com/img/social/tweet.png" border="0" title="Share via Twitter" alt="Tweet Button" width="55" height="20" style="outline-style:none;text-decoration:none;display:block;max-width:100%;" /></a></p>

How do I get remove the display block hack if that is what is causing this?

roshodgekiss roshodgekiss, 4 years ago

Hi ZeroGravity, if you export and edit your template, you should find a line similar to the following:

img { display: block; }

If you remove this, then this will be solved - however, it does come with the consequence of introducing gaps in Gmail.

A more bulletproof way to deal with this is to create a table and nest each of your social sharing icons in a cell. That tends to solve a lot of layout issues, however awkward it may seem :)

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free