topic Re: Email signature not working on mobile in CMS Development

Email signature not working on mobile

rebeccasafier — Tue, 18 Feb 2020 17:14:32 GMT

I have a question about my email signature I generated through Hubspot's tool. I pasted the HTML into my ConvertKit emails. It looks great on desktop, but on mobile (my iPhone anyway), the formatting is all off -- the picture isn't loading and the email and link are going vertically down the screen, one letter at a time. How can I make the email signature format correctly for mobile? Thanks!

Re: Email signature not working on mobile

jennysowyrda — Fri, 21 Feb 2020 23:51:27 GMT

Hi @rebeccasafier,

Which signature are you using? Can you share screenshots of what you are seeing in desktop vs. mobile?

Thank you,
Jenny

Re: Email signature not working on mobile

rebeccasafier — Sat, 22 Feb 2020 02:15:35 GMT

Hi Jenny,

I used Hubspot's email signature generator tool.

Here's how it looks on desktop:

Here is it on mobile:

Thank you!

P.S. Tried to submit this with the HTML code for my email signature but it wouldn't let me. Got this message:

Your post has been changed because invalid HTML was found in the message body. The invalid HTML has been removed. Please review the message and submit the message when you are satisfied.

Re: Email signature not working on mobile

jennysowyrda — Mon, 24 Feb 2020 14:06:27 GMT

Hi @rebeccasafier,

Thank you for the screenshots!

Can you confirm which email client it is showing like this in? Can you confirm the issue is occurring across multiple email clients?

Thank you,
Jenny

Re: Email signature not working on mobile

RyanHeffernon — Mon, 27 Apr 2020 15:13:53 GMT

Hi,

I am having the same problem with the email signature. It is happening in Gmail for me.

Re: Email signature not working on mobile

dennisedson — Thu, 24 Sep 2020 13:28:32 GMT

hey @RyanHeffernon it sounds like you're still looking for assistance on this matter, to ensure we're all aligned on what you're looking to resolve, can you please reshare any links / info you have that will assist me in investigating this matter

Thanks in advance!

Re: Email signature not working on mobile

HannaLeena — Thu, 10 Dec 2020 11:00:33 GMT

Hi,

We have this same problem - I used the email signature creator (meaning this: https://www.hubspot.com/email-signature-generator) to create signatures for my team.

We have HubSpot connected to Gmail and have added the signature to HubSpot (with the code) and copied it to Gmail settings as a signature.

When I send an email from HubSpot, it looks good on mobile too (at least Apple/iOS own mail app).

But, when I use Gmail to send out emails, only the desktop version looks good. When I open the message on my phone (iPhone 11 and use the phone's standard email app), it doesn't work. See the attached images - one showing the email sent from HubSpot directly and the other one from Gmail.

Would appreciate any help with this! 😍

- Hanna-Leena

Re: Email signature not working on mobile

dennisedson — Thu, 10 Dec 2020 14:56:16 GMT

Hey @HannaLeena !

Would you mind dropping the code that was outputed in here so we can take a look?

Re: Email signature not working on mobile

HannaLeena — Thu, 10 Dec 2020 15:47:32 GMT

Here is the code but as mentioned, the code seems to work in HubSpot. What doesn't work is the option "copy signature" feature where you copy-paste the signature from the signature generator to your Gmail signature settings. (or that works partly - works on desktop but breaks when viewed on mobile).

<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td class="sc-TOsTZ kjYrri" style="text-align: center;"><img src="https://drive.google.com/uc?id=1QHnpkp8OqAnaTphQMEzMe5BjQTrJwxlh" role="presentation" width="130" class="sc-cHGsZl bHiaRe" style="max-width: 130px; display: block;"></td></tr><tr><td height="30"></td></tr><tr><td style="text-align: center;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma; display: inline-block;"><tbody><tr style="text-align: center;"><td><a href="https://www.facebook.com/dearlucycloud" color="#503d55" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(80, 61, 85);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" color="#503d55" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(80, 61, 85); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.linkedin.com/in/tainasipila/" color="#503d55" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(80, 61, 85);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#503d55" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(80, 61, 85); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.instagram.com/dearlucycloud" color="#503d55" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(80, 61, 85);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#503d55" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(80, 61, 85); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td></tr></tbody></table></td></tr></tbody></table></td><td width="46"><div></div></td><td style="padding: 0px; vertical-align: middle;"><h3 color="#000000" class="sc-fBuWsC eeihxG" style="margin: 0px; font-size: 16px; color: rgb(0, 0, 0);"><span>Taina</span><span> </span><span>Sipilä</span></h3><p color="#000000" font-size="small" class="sc-fMiknA bxZCMx" style="margin: 0px; color: rgb(0, 0, 0); font-size: 12px; line-height: 20px;"><span>Founder, CEO</span></p><p color="#000000" font-size="small" class="sc-eqIVtm kRufpp" style="color: rgb(0, 0, 0); margin: 0px; font-size: 12px; line-height: 20px;"><span>"Data-driven, visual sales management"</span></p><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma; width: 100%;"><tbody><tr><td height="30"></td></tr><tr><td color="#F35D72" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ" style="width: 100%; border-bottom: 1px solid rgb(243, 93, 114); border-left: none; display: block;"></td></tr><tr><td height="30"></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#F35D72" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(243, 93, 114);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#F35D72" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(243, 93, 114);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:+ 358 50 547 2415" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>+ 358 50 547 2415</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#F35D72" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(243, 93, 114);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#F35D72" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(243, 93, 114);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="mailto:taina@dearlucy.co" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>taina@dearlucy.co</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#F35D72" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(243, 93, 114);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#F35D72" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(243, 93, 114);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//dearlucy.co" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>dearlucy.co</span></a></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td height="30"></td></tr></tbody></table><span style="display: block; text-align: left;"><a target="_blank" rel="noopener noreferrer" href="https://www.dearlucy.co/visit-demo" color="#f35d72" class="sc-fAjcbJ byigni" style="border-width: 6px 12px; border-style: solid; border-color: rgb(243, 93, 114); display: inline-block; background-color: rgb(243, 93, 114); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">VISIT OUR ONLINE DEMO</a></span><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Tahoma;"><tbody><tr><td height="30"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

Re: Email signature not working on mobile

vhannon — Sun, 24 Jan 2021 19:23:26 GMT

Hi I'm having the same issue. Signature works fine on desktop (using both Gmail and Apple Mail to send) but renders as @rebeccasafier above. Was a fix given for this? Urgent as makes the email signature look very unprofessional.

Re: Email signature not working on mobile

dennisedson — Mon, 25 Jan 2021 16:19:30 GMT

@vhannon , @HannaLeena

Firstly, apologies for missing that response with the code snippet.

Secondly, I am strangely not able to replicate the issue 🤔

It might be worth trying to copy the html from the generator.

Steps to add to gmail

1. Copy the html code

2. Create a plain text file and paste code into it. Make sure it is plain text. On a mac, you can use text edit and under format tab, select make plain text. Windows can use notepad and do the same

3. Save the text file with a .html extension. eg: signature.html

4. Open the file with your browser of choice

5. Select all on page and copy

6. Paste into the signature in gmail settings.

If you could try that and report back if it worked, that would be great!

Re: Email signature not working on mobile

mwalters — Wed, 03 Feb 2021 15:45:59 GMT

No resolution I'm afraid but same issue. Except that I get nothing on mobile. Standard text only. No image, no button, nada... customer service sent me here as its a free service. Howevere I am unlikely to upgrade to paid services if the free ones don't work

Re: Email signature not working on mobile

VictorSalo — Tue, 02 Mar 2021 11:28:30 GMT

Has this issue been resolved somewhere? I have the exact same issue as "rebeccasafier". Can someone please send a link on how to resolve this if it has been resolved in another thread?

Best regards,

Victor

Re: Email signature not working on mobile

KKirrane — Wed, 22 Sep 2021 05:46:58 GMT

I am also looking for a solution to this. When sending an email from within Hubspot, I paste the HTML source code that the Hubspot email signature generator puts out. The signature appears perfectly fine on desktop across multiple email clients, but always appears as a long vertical line of characters on mobile, across a range of email clients (Gmail and Apple Mail are most used). I really need some help making these signatures appear properly on mobile.

Re: Email signature not working on mobile

BrittanyRiland — Wed, 17 Nov 2021 16:32:56 GMT

Has anyone found a solution to this? I'm having similar issues with my email signature breaking in weird spots only on mobile.

Re: Email signature not working on mobile

CDear — Sun, 05 Dec 2021 09:14:09 GMT

Hello Dennis,

I unfortunately am having the same issue with a fair amount of employees on our end! Has there been any other solution apart from putting it in the Signature Generator again?

We also have the issue of there being "signature is too long, and has too many characters"

All the best,

Charlotte

Re: Email signature not working on mobile

philthehuman — Tue, 21 Dec 2021 06:45:06 GMT

If anyone is still looking for a solution to this, you can add a min-width into the table tag at the top of the generated HTML. For example:

<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW"

style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">

is how the table tag looks by default.

But if you set a min-width to the table styling (530px is just an example, it can be any width that will suitably fit your content, preferably under 600px) it will stop the signature from squashing on mobile & add a horizontal scrollbar instead. Eg:

<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW"

style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; min-width: 530px;">

Re: Email signature not working on mobile

MiaSrebrnjak — Tue, 21 Dec 2021 17:41:46 GMT

Thank you for sharing @philthehuman!

Cheers
Mia, Community Team

Re: Email signature not working on mobile

MGuarello — Fri, 18 Mar 2022 16:32:57 GMT

I'm having a similar problem. The HTML signature is already configured and looking good on HubSpot but when sending a test e-mail a Gmail the pictures do not get displayed properly.

Tried reducing the size. It didn't work.