wid2001 Posted June 15, 2018 Share Posted June 15, 2018 I have an html email template with social media icons in the footer. When viewed on mobile devices for some reason they are stacking vertically. Below is the footer code <tr> <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // --> <table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%"> <tbody> <tr pardot-removable=""> <td align="left" class="footerContent" pardot-data="link-color:#ffffff;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 20px; background: rgb(55, 59, 58);" valign="top"> <div> </div> <div style="text-align: center;"><img alt="Partner Logos" border="0" src="http://info.mission43.org/Mission43_PartnerLogos_Group_WHITE" style="border-width: 0px; border-style: solid;"><br> <br> <a href="https://www.facebook.com/Mission43Idaho/" style="text-size-adjust: 100%; font-weight: normal; color: #ffffff;"><img alt="Facebook" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mjc/427472/270350/light_facebook_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="https://www.instagram.com/mission43/?hl=en"><img alt="Instagram" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mj9/427472/270348/light_instagram_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="https://www.linkedin.com/company-beta/10843452/"><img alt="LinkedIn" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mhy/427472/270344/light_linkedin_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="http://www.mission43.org/"><img alt="Mission43" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mj1/427472/270346/light_link_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a></div> </td> </tr> <tr> <td align="left" class="footerContent" pardot-data="link-color:#ffffff;link-underline:underline;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(55, 59, 58);" valign="top"> <hr> <div style="text-align: center;"><a href="http://www.jkaf.org/" style="color: rgb(255, 255, 255);"><img alt="" border="0" src="http://info.mission43.org/l/427472/2017-10-04/7w1mhw/427472/270342/JKAF_Logo.png" style="border-width: 0px; border-style: solid;"></a></div> <div style="text-align: center;"><strong>Our mailing address is:</strong>%%account_address%% <hr><em>Copyright © %%current_year_YYYY%%, All rights reserved. </em>J.A. and Kathryn Albertson Family Foundation. You are receiving these emails because you provided Mission43 with your email address and have been in contact with us. You can update your contact information, or if you no longer wish to receive these types of emails you can <a href="%%unsubscribe%%" style="color: rgb(255, 255, 255);">unsubscribe from this list</a></div> </td> </tr> <tr> <td align="left" class="footerContent original-only" pardot-data="link-color:#ffffff;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(55, 59, 58);" valign="top"><a href="%%unsubscribe%%" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline;">unsubscribe from all emails</a> <a href="%%email_preference_center%%" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline;">update subscription preferences</a> </td> </tr> </tbody> </table> <!-- // END FOOTER --></td> </tr> Not sure if the fix needs to be in the footer or the CSS so I am including my CSS as well. <style type="text/css">#outlook a { padding: 0; } .body{ width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } p { margin: 1em 0; } table td { border-collapse: collapse; } /* hide unsubscribe from forwards*/ blockquote .original-only, .WordSection1 .original-only { display: none !important; } @media only screen and (max-width: 480px){ body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */ body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */ #bodyCell{padding:10px !important;} #templateContainer{ max-width:600px !important; width:100% !important; } h1{ font-size:24px !important; line-height:100% !important; } h2{ font-size:20px !important; line-height:100% !important; } h3{ font-size:18px !important; line-height:100% !important; } h4{ font-size:16px !important; line-height:100% !important; } #templatePreheader{display:none !important;} /* Hide the template preheader to save space */ #headerImage{ height:auto !important; max-width:600px !important; width:100% !important; } .headerContent{ font-size:20px !important; line-height:125% !important; } #bodyImage{ height:auto !important; max-width:560px !important; width:100% !important; } .bodyContent{ font-size:18px !important; line-height:125% !important; } .templateColumnContainer{display:block !important; width:100% !important;} .columnImage{ height:auto !important; max-width:260px !important; width:100% !important; } .leftColumnContent{ font-size:16px !important; line-height:125% !important; } .rightColumnContent{ font-size:16px !important; line-height:125% !important; } .footerContent{ font-size:14px !important; line-height:115% !important; } .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */ } </style> Any ideas would be much appreciated. Thanks! Link to comment Share on other sites More sharing options...
Funce Posted August 1, 2018 Share Posted August 1, 2018 The issue here is your very last CSS statement in your style lot. By displaying it as a block (Under a media query, so when the screen is small) it makes each link take up a full line. You might be able to remove this, to get the behaviour you want, but you would need to test further. .footerContent a { display:block !important; } /* Place footer social and utility links on their own lines, for easier access */ Link to comment Share on other sites More sharing options...
webtrickshome Posted August 1, 2018 Share Posted August 1, 2018 Why on earth are you using HTML tables. That's the worst thing to do. It's such a pain to even look into the matter. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now