CMS Development

rebeccasafier
Member

Email signature not working on mobile

SOLVE

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! 

1 Accepted solution
philthehuman
Solution
Member

Email signature not working on mobile

SOLVE
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 &amp; 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;">

View solution in original post

18 Replies 18
philthehuman
Solution
Member

Email signature not working on mobile

SOLVE
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 &amp; 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;">
MGuarello
Member

Email signature not working on mobile

SOLVE

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.


0 Upvotes
MiaSrebrnjak
Community Manager
Community Manager

Email signature not working on mobile

SOLVE

Thank you for sharing @philthehuman!

 

Cheers
Mia, Community Team 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst


Did you know that the Community is available in other languages?
Join regional conversations by
changing your language settings

0 Upvotes
BrittanyRiland
Member

Email signature not working on mobile

SOLVE

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

0 Upvotes
KKirrane
Participant

Email signature not working on mobile

SOLVE

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. 

0 Upvotes
mwalters
Participant

Email signature not working on mobile

SOLVE

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

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Email signature not working on mobile

SOLVE

@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!

0 Upvotes
CDear
Member

Email signature not working on mobile

SOLVE

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

0 Upvotes
vhannon
Member

Email signature not working on mobile

SOLVE

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. 

 

0 Upvotes
HannaLeena
Participant

Email signature not working on mobile

SOLVE

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

0 Upvotes
HannaLeena
Participant

Email signature not working on mobile

SOLVE

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-LeenaImage from iOS (25).pngImage from iOS (26).png 

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Email signature not working on mobile

SOLVE

Hey @HannaLeena !

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

 

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Email signature not working on mobile

SOLVE

Hi @rebeccasafier,

 

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

 

Thank you,
Jenny

0 Upvotes
rebeccasafier
Member

Email signature not working on mobile

SOLVE

Hi Jenny, 

 

I used Hubspot's email signature generator tool. 

 

Here's how it looks on desktop: 

SLG signature.png

 

Here is it on mobile: 

mobile.PNGmobile 2 .PNG

 

 

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.

 
 
0 Upvotes
VictorSalo
Participant

Email signature not working on mobile

SOLVE

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

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Email signature not working on mobile

SOLVE

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

0 Upvotes
RyanHeffernon
Member

Email signature not working on mobile

SOLVE

Hi, 

 

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

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Email signature not working on mobile

SOLVE

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!