search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.76k stars 1.09k forks source link

center align for social icons doesn't work #927

Open kgarvy opened 5 years ago

kgarvy commented 5 years ago

I followed the html for aligning social icons that can be found here. The social icons are aligned properly when I'm testing the email locally, but when I send a test email the social icons are no longer aligned.

This is my html

                                  <table align="center" class="menu float-center">
                                        <tr>
                                          <td>
                                            <table class>                       
                                              <tr>
                                                <th class="menu-item float-center">
                                                  <a href="https://www.facebook.com/upstatenc/"><img src="https://gist.githack.com/kgarvy/922d69e685811500146f92e5dbd95e79/raw/25a9f50a162f573bb1e6febcc2f65204e5c26d46/facebook.svg" alt=""></a></th>                                               
                                                <th class="menu-item float-center">
                                                  <a href="undefined"><img src="https://gist.githack.com/kgarvy/9489b40ace80bd0f0044d136da121c6f/raw/bb0de6ffa5b481568dbc4472353c47b072708db8/twitter.svg" alt=""></a></th>                                              
                                                <th class="menu-item float-center">
                                                  <a href="undefined"><img src="https://gist.githack.com/kgarvy/944a87bb2f9d35875bc91a8319586298/raw/c125f82c90e62de6cf3794051ad5027bb414ef9a/youtube.svg" alt=""></a></th>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                      </table>

When I check it out locally, it looks good

screen shot 2018-11-26 at 11 44 11 am

but when i send a test email using letter opener, they aren't center aligned anymore

screen shot 2018-11-26 at 11 33 19 am
nikitasol commented 5 years ago

Hi,

I think you need to wrap the code inside <center data-parsed="">your code goes here</center>.

kgarvy commented 5 years ago

I actually do have it wrapped in that (it's the line above - forgot to include) 

                             <center data-parsed="">
                                    <table align="center" class="menu float-center">
                                        <tr>
                                          <td>
                                            <table>                       
                                              <tr>
                                                <th class="menu-item float-center">
                                                  <a href="https://www.facebook.com/upstatenc/"><img src="https://gist.githack.com/kgarvy/922d69e685811500146f92e5dbd95e79/raw/25a9f50a162f573bb1e6febcc2f65204e5c26d46/facebook.svg" alt=""></a></th>                                               
                                                <th class="menu-item float-center">
                                                  <a href="undefined"><img src="https://gist.githack.com/kgarvy/9489b40ace80bd0f0044d136da121c6f/raw/bb0de6ffa5b481568dbc4472353c47b072708db8/twitter.svg" alt=""></a></th>                                              
                                                <th class="menu-item float-center">
                                                  <a href="undefined"><img src="https://gist.githack.com/kgarvy/944a87bb2f9d35875bc91a8319586298/raw/c125f82c90e62de6cf3794051ad5027bb414ef9a/youtube.svg" alt=""></a></th>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                      </table>
                                  </center>
peacefulseeker commented 5 years ago

Try to wrap each image individually into <center> tag. Also decrease the table width, say to 50%(try pixels as well in case not working)