Email Marketing Tool

utahlights
Participant

Social Sharing Icon Size

SOLVE

Hi! I'm needing some help with the size of the social icons on mobile view in edit mode & I've also sent test emails to 3 different emails and they are very large, oversized icons there as well, but it's only on mobile view! Can anyone help me get it fixed? If you can't see the content when you click the link, I'm happy to send test emails to anyone who would be willing to help me fix it! 

 

https://app.hubspot.com/email/338130/edit-beta/7358706647/content

 

Thanks! 🙂 

0 Upvotes
2 Accepted solutions
Mike_Eastwood
Solution
Recognized Expert | Gold Partner
Recognized Expert | Gold Partner

Social Sharing Icon Size

SOLVE

Hi @utahlights 

 

We've fixed this for one of client with a bit of photoshop magic and some styling in the email template.

 

Difficult to say what to do without seeing the email.

 

Happy for you to send me an email.

Mike

 

p.s. we can't see you example (requires login).

 

 

View solution in original post

0 Upvotes
Mike_Eastwood
Solution
Recognized Expert | Gold Partner
Recognized Expert | Gold Partner

Social Sharing Icon Size

SOLVE

We managed to fix it with a CSS tweak in the Social Media module in the "Sonata" Email Template.

 

The Social Media icons were full width on mobile.

 

So, adding an "!important" forced the style to be used.

 

Here's a snippet from the Social Media module:

 

Before

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px;" %}
...

After

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~"!important;width:"~size~"!important;border-radius:"~borderRadius~";border-width:0px;border:0px;" %}
...

Note the addition of "!important".

 

Have fun

-Mike

View solution in original post

5 Replies 5
Mike_Eastwood
Solution
Recognized Expert | Gold Partner
Recognized Expert | Gold Partner

Social Sharing Icon Size

SOLVE

We managed to fix it with a CSS tweak in the Social Media module in the "Sonata" Email Template.

 

The Social Media icons were full width on mobile.

 

So, adding an "!important" forced the style to be used.

 

Here's a snippet from the Social Media module:

 

Before

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px;" %}
...

After

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~"!important;width:"~size~"!important;border-radius:"~borderRadius~";border-width:0px;border:0px;" %}
...

Note the addition of "!important".

 

Have fun

-Mike

Aakar
Key Advisor

Social Sharing Icon Size

SOLVE

Hi @utahlights 

 

It could be an issue with the image size you've used.  Go to the email template's header and define the image size, like this. Here I've defined the CSS class that we have used in the template (it could be different for you). And define the width of the image like this:_  {width:32px !important;}

 

Screen Shot 2019-02-05 at 9.46.56 PM.png

 

Thanks.

Aakar Anil
Marketing Technologist
aakar.me | @aakarpost | in/aakarpost
0 Upvotes
utahlights
Participant

Social Sharing Icon Size

SOLVE

Hi. Thanks for the reply, I already had that checked by a HS customer service rep & It's not showing up any bigger than it should be unless it's being viewed on a mobile device. 

0 Upvotes
Aakar
Key Advisor

Social Sharing Icon Size

SOLVE

@utahlights can you send me the web-preview link? Email me at: aakar[at]aakarpost[dot]com

Aakar Anil
Marketing Technologist
aakar.me | @aakarpost | in/aakarpost
0 Upvotes
Mike_Eastwood
Solution
Recognized Expert | Gold Partner
Recognized Expert | Gold Partner

Social Sharing Icon Size

SOLVE

Hi @utahlights 

 

We've fixed this for one of client with a bit of photoshop magic and some styling in the email template.

 

Difficult to say what to do without seeing the email.

 

Happy for you to send me an email.

Mike

 

p.s. we can't see you example (requires login).

 

 

0 Upvotes