Free email signature generator - Signature distorted on mobile

[EHHodgson]

Hello,

I’m hoping someone can help me make a signature I created via the free email signature generator responsive for mobile.

On desktop, my team really likes how it looks. But on mobile, the signature completely distorts, to the point where there are 3 characters per line (see attached). Our emails are Outlook.

With how step-by-step the generator is, I’m not sure how to fix this. Note: pasting HTML code into Outlook’s “create new signature” does not work. Any tips/solutions would be greatly appreciated!

[kosalaindrasiri]

Hey @EHHodgson,

This is a very common issue with HTML email signatures, especially in Outlook. The problem occurs because email signatures cannot use true responsive design like websites can, and mobile email clients often struggle to render complex HTML layouts properly.

Without seeing the actual HTML code from your email signature, I cannot provide a proper, targeted solution to fix your specific mobile distortion issue.

But, try to use Table-Based Layout,

• For better Outlook compatibility:
  • Structure your signature using HTML tables instead of divs
  • Tables provide more consistent rendering across different Outlook versions
  • Avoid complex CSS that mobile clients might not support

Also, as a last resort, you can convert your entire signature into a single image. This ensures consistent appearance across all devices. However, this reduces accessibility and text selectability.

Hope this will help!

Regards,

[EHHodgson]

Hey Kosala,

Thank you for the quick reply! I really am not a coder haha, would you be able to help me with the tables over divs edit if I give you the code?

<table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial;”><tbody><tr><td><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial;”><tbody><tr><td width=“150” style=“vertical-align: middle;”><span style=“margin-right: 20px; display: block;”><img src=“https://341712622.fs1.hubspotusercontent-na3.net/hubfs/341712622/Stacked_Logomark_background.png” role=“presentation” width=“130” style=“max-width: 130px;”></span></td><td style=“vertical-align: middle;”><h2 style=“margin: 0px; font-size: 16px; font-family: Arial; color: rgb(55, 6, 23); font-weight: 600;”><span>Emma</span><span>\ </span><span>Hodgson, MDes</span></h2><p style=“margin: 0px; color: rgb(55, 6, 23); font-size: 12px; line-height: 20px;”><span>Lead Designer</span></p><div style=“margin: 0px; font-weight: 500; color: rgb(55, 6, 23); font-size: 12px; line-height: 20px;”><span>Stacked Pancake & Breakfast House</span></div></td><td width=“30” aria-label=“Vertical Spacer”><div style=“width: 30px;”></div></td><td width=“1” aria-label=“Divider” style=“width: 1px; height: auto; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(163, 68, 35);”></td><td width=“30” aria-label=“Vertical Spacer”><div style=“width: 30px;”></div></td><td style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial;”><tbody><tr style=“vertical-align: middle; height: 25px;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial; width: 30px;”><tbody><tr><td style=“vertical-align: bottom;”><span style=“display: inline-block; background-color: rgb(163, 68, 35);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-dark-2x.png” alt=“mobilePhone” width=“13” style=“display: block; background-image: linear-gradient(rgb(163, 68, 35), rgb(163, 68, 35));”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(55, 6, 23);”><a href=“tel:705-795-6782” style=“text-decoration: none; color: rgb(55, 6, 23); font-size: 12px;”><span>705-795-6782</span></a></td></tr><tr style=“vertical-align: middle; height: 25px;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial; width: 30px;”><tbody><tr><td style=“vertical-align: bottom;”><span style=“display: inline-block; background-color: rgb(163, 68, 35);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-dark-2x.png” alt=“emailAddress” width=“13” style=“display: block; background-image: linear-gradient(rgb(163, 68, 35), rgb(163, 68, 35));”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(55, 6, 23);”><a href=“mailto:emmah@stackedpancakehouse.ca” style=“text-decoration: none; color: rgb(55, 6, 23); font-size: 12px;”><span>emmah@stackedpancakehouse.ca</span></a></td></tr><tr style=“vertical-align: middle; height: 25px;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial; width: 30px;”><tbody><tr><td style=“vertical-align: bottom;”><span style=“display: inline-block; background-color: rgb(163, 68, 35);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-dark-2x.png” alt=“website” width=“13” style=“display: block; background-image: linear-gradient(rgb(163, 68, 35), rgb(163, 68, 35));”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(55, 6, 23);”><a href=“https://www.stackedpancakehouse.ca” style=“text-decoration: none; color: rgb(55, 6, 23); font-size: 12px;”><span>https://www.stackedpancakehouse.ca</span></a></td></tr><tr style=“vertical-align: middle; height: 25px;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” style=“vertical-align: -webkit-baseline-middle; font-size: small; font-family: Arial; width: 30px;”><tbody><tr><td style=“vertical-align: bottom;”><span style=“display: inline-block; background-color: rgb(163, 68, 35);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-dark-2x.png” alt=“address” width=“13” style=“display: block; background-image: linear-gradient(rgb(163, 68, 35), rgb(163, 68, 35));”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(55, 6, 23);”><span style=“font-size: 12px; color: rgb(55, 6, 23);”><span>Bayview Dr., Barrie, ON, L4N 9A5</span></span></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td colspan=“3” style=“max-width: 300px; font-size: 12px; padding-top: 1rem; text-align: center;”><div class=“legal-content”><p style=“font-size: inherit; margin: 0px;”></p><p style=“font-size: inherit; margin: 0px;”></p><p style=“font-size: inherit; margin: 0px;”></p></div></td></tr></tbody></table>

Much appreciated,

Emma

[Balaji_Mavlers1]

Hi @EHHodgson

Outlook strips raw HTML when pasted directly into the signature editor. The workaround is to save your HTML as a file, open it in a browser, copy the rendered signature, and paste it into Outlook.

Use tables with inline CSS for better compatibility, and make images responsive with:

style="max-width:100%; height:auto;"

You can check this HubSpot guide too:
Add and manage email signatures in the CRM
Hope this helps!

[EHHodgson]

Hey Balaji,

Thank you for your reply; I just tried this and it did not render in a browser. What I did was copy the HTML, save it in TextEdit as a .html file, and opened it in Chrome (I also tried Safari). It just shows up as text. Could you let me know what I am doing wrong?

Thanks again,

Emma