Align two images (side by side) in email template so they render correctly in Outlook and Gmail app.
$10-30 USD
Paid on delivery
We have a template that is complete and has been tested to work in all major email clients. However, when the email is shared via social forward (Salesforce), the open graph tags are being ignored. We really want Facebook to pull the proper image as a shared thumbnail.
My Solution:
One thing I tried today worked well. Since part of our logo is what we want Facebook to use (wheat stalk, see attached), I divided the image into two images and tried to recreate the exact look in the header as if the logo still consisted of one image. Facebook picked up the image during the share. Problem is, when I test the template in a simulator (emailonacid), the Gmail app and a few versions of Outlook don't render the two images the way I want them to look. As a developer, I understand the quirkiness of Outlook and Gmail. The issue is that Outlook doesn't support margin or float properties.
I've tried everything I know, but wanted to post on here in case someone with more experience than myself knows a solution. If you know how to fix, this would probably be a very quick job.
I have the page temporarily hosted here: [url removed, login to view] See the logo at the top left? It is now two images. These two images are on lines 110-112. It may look find in your browser, but in the Gmail App, Outlook 2007, 2010, 2013 and 2016, the larger image is spaced too far from the wheat stalk. See attached images. Thanks!
Project ID: #10863186
About the project
Awarded to:
Greetings, I can fix this issue. Margin or float is absolutely not working here. I saw the page and i know the solution. But i will fix it on Monday morning if you are okay then please inbox me. Many Thanks Dan More
