Content Stacking vertically on Mobile Devices

[wid2001]

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>&nbsp;</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.&nbsp;</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>&nbsp;&nbsp;&nbsp;<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>&nbsp;</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!

[Funce]

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 */

 

[webtrickshome]

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.