1

I am using Foundation Email to create HTML emails and it is working very well however the footer images are not obeying the CSS I set to limit their sizes. Here is how the footer is injected into the page:

            </a>
        </columns>
    </row>
    {{>footer}}
</container>

And here is the code in the footer page:

<row class="background-aqua socialLinks">
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://www.facebook.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/Facebook+Logo.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3">
        <spacer size="16"></spacer>
        <a href="http://instagram.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/instagram.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://www.pinterest.com/SPLENDA/">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/pinterest.png"/></center>
        </a>
    </columns>
    <columns small="3" large="3" >
        <spacer size="16"></spacer>
        <a href="http://twitter.com/splenda">
            <center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/twitter.png"/></center>
        </a>
    </columns>
</row>

Here is the CSS regarding the footer:

.socialLinks{
    max-width: 700px;
    a{
        max-height: 35px;
        max-width: 35px;    
    }
    img{
        padding:20px 0px;
        width:35px;
        height:35px;
        max-height: 35px;
        max-width: 35px;    
    }
}

.footer{
    img{
        padding: 45px 0 15px 0;
        max-width:148px;
        height: auto;
    }
    p{
        color:white;
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }
    .footerLink{
        text-decoration: underline;
        font-weight: bold;
        color:white;
    }
}

All of the other images in the email fit in properly but the images under socialLinks class do not stay 35px. This is only occurring on Outlook and not other email clients. Is there any solution to this or a workaround for Outlook? I know it is known for being pesky with HTML emails so any help is appreciated.

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Ben Cavenagh
  • 608
  • 1
  • 6
  • 22

1 Answers1

1

Figured it out for any future email developers that run into this problem. You need to add the width and height of the images inline rather than through css so an image would look like:

<img src="www.image.com" width="35" height="35"/>

rather than just the image source and the css setting the height and width

Ben Cavenagh
  • 608
  • 1
  • 6
  • 22