HTML Email Signature Design - Mobile Trouble

Having trouble figuring out how to write HTML code that will work on both mobile and desktop email clients. Right now its working well on desktop, but whenever I open it in mobile it renders oddly - see screenshot below.

I've got it into the Apple Mail signature and it looks perfect when I send it and open via desktop Apple or Gmail.

The main issue is that when it the email is opened on mobile, it has each of the columns (separated through tags) on a different line. When I flip my phone to horizontal, it automatically readjusts... Does this mean the float:left property isn't working on mobile? How would I adjust this? Do I need to specify width? Not sure

I've tried making the whole thing smaller which hasn't worked. I purposely chose to make it 600px width because I saw another signature that resized automatically to fit mobile that was 600px.

When I open in Google Chrome and use the toggle device, it reformats perfectly to fit on a mobile screen.

Thanks in advance for the help!

Example of what it looks like on mobile

Here's the code:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Email Signature</title>
</head>

<body>
  <div id="container">
    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
    </div>

    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">

      <p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
        MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
        <span style=" font-size: 13px;">[email protected]</span></p>
    </div>

    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <div class="news">
        <a href="http://hamptonyachtgroup.com/dealers/seattle/news/save-the-date-hyg-2018-rendezvous"><img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt=""></a>
      </div>
      <div class="social">
        <a href="http://facebook.com/hamptonyachtgroup"><img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top"></a>
        <a href="http://instagram.com/hamptonyachtgroup"> <img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top"></a>
        <a href="http://hamptonyachtgroup.com"><img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top"></a>
      </div>
    </div>
  </div>


</body>

</html>

Solution

I don't suggest divs in email. They don't work with Outlook. Your divs were not configured in the correct manner, so they did not behave as you wanted. For instance, you didn't declare a width on any of your divs or images.

Your social media graphics don't line up in a table cell 226px wide, which is one of the reasons things were not lining up in your signature. I'm not spending time editing them for you, I just made them fit width-wise so that's why they will look wonky.

I tested this in Litmus and it works for Apple, IOS, Android, Gmail, Outlook and others. I turned the background of the table red to show what you still need to fix. You should fill in your ALT information as well.

Try this instead:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Email Signature</title>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
  <tr valign="top">
    <td rowspan="2" width="115">
      <img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
    </td>
    <td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
    </td>
    <td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
    </td>
  </tr>
<tr valign="top"> 
  <td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
  OFFICE: 206.623.5200 <br />
  [email protected]</td>
  <td><a href="http://facebook.com/hamptonyachtgroup"><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" /></a>
    <a href="http://instagram.com/hamptonyachtgroup"> <img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" /></a>
    <a href="http://hamptonyachtgroup.com"><img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></a></td>
</tr>
</table>

</body>

</html>

Good luck with the yacht sales.