Follow me icons - Edit size and mobile alignment

Lea
Participant

Hi 

I am using in one of my email template the Follow me - email icons

How can I edit the size (32 px x32 px) 

And how can I have a centered alignement on mobile ? 

Thanks! 

0 Upvotes
12 Replies 12
Stephanie-OG
Key Advisor

Hi Lea!

 

If you go into the email template (you can do so from the Advanced section of the Settings tab on the email tool), you can click on the "Follow Me" module and update the settings on the right-hand corner to center align the icons:

 

centeralign.png

 

Note that this will apply these changes to all emails using this template.

 

Changing the icon size might be a little trickier. On the "Search Assets" side of the Design Manager you can search for the "Follow Me - Email" module and clone it. From there you can update the width:

 

{% set default_images_path = 'https://static.hsappstatic.net/content_shared_assets/static-1.4081/img/hs_default_template_images/modules/Follow%20Me%20-%20Email' %}
<table align="{{ module.alignment }}" style="width: auto; text-align: {{ module.alignment }};">
  <tbody>
    <tr align="{{ module.alignment }}">
      {% for networks in module.social %}
      <td style="margin: 0 5px 0 0; line-height: 1">
        <a href="{{ networks.url }}">
          {% if networks.network == 'icon' %}
          {% if !networks.network_image.src %}
          {% set imgURL = default_images_path ~'/icon_circle_color-1.png' %}
          <img src="{{ imgURL }}">{% else %}<img src="{{ networks.network_image.src }}" width="{{ networks.network_image.width }}">{% endif %}
          {% else %}
          {% set imgURL = default_images_path ~'/'~ networks.network ~'_'~ module.icon_shape ~'_'~ module.color_scheme ~'.png' %}
          <img src="{{ imgURL }}" width="32px">
          {% endif %}
        </a>
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>

And then use your new, cloned module in your email template.

 

I hope that helps!

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
Lea
Participant

Thank you Stephanie, 

 

I did the necessary for the width and your instructions works perfectly.

However my concern is the rendering on mobile .... 

The icons are tiny small now and off centered 

I want them to be a good size and centered on mobile (for PC screen they are aligne left)

The fact that they are very small is maybe due to the fact that they are some <head> markup on the template I am using 

 

See the additional <head> markup: 

 

<style type="text/css" data-hse-inline-css="true">
body{font-family: arial, helvetica, sans-serif; }
a {text-decoration:none; color:#444444;}
.learn-more-btn { text-align: right;}
.socialicons {padding:5px 0 0 0;}
.social-icon img {width:32px; height:32px;}
.social-icon td {margin-left:2px; display:inline-block;}
#contentTableOuter { padding:0 !important; box-shadow:none !important; border:#e6e6e6 solid 0px !important; }
.header-logo img {width:150px !important;}
#contentCell {padding:10px 0 0 0 !important;}
#headerTable {padding-right:0 !important;}
h2 {font-family: arial, helvetica, sans-serif; font-size: 30px; margin-bottom: 21px;}
h3 {font-family: arial, helvetica, sans-serif; font-size: 18px; margin-bottom: 15px;}
ul {padding: 0 0 30px 30px !important; margin:0 !important;}
ul li {line-height:30px !important; color:#2ea8e1;}
ul li a {cursor:pointer; color:#2ea8e1; }
p {font-family: arial, helvetica, sans-serif; font-size: 15px !important; line-height: 18px !important; padding: 0 0 30px 0 !important;
margin: 0 !important;
}
td.footer-main p {padding:0 0 15px 0 !important; font-size:13px !important;}


@media (max-width:767px) {
.social-icon img {width:auto; height:auto;}
}
@media (max-width:500px) {
.section-main {margin-top:30px !important;}
}
@media (max-width:480px) {
.header-logo {padding:20px 15px 5px 15px !important; display:block; text-align:center;}
.socialicons {padding: 15px 15px 20px 15px !important; display: block; text-align: center; height:30px; width: 160px; margin: 0 auto;}
td.footer-main.column { padding: 15px 6% !important;}
td.footer-main {padding: 15px 8% !important; width: 88% !important;}
}
</style>

 

 

And as for rendering on mobile can you also let me know how can I have them centered only on mobile 

0 Upvotes
Stephanie-OG
Key Advisor

Without seeing the full email, how the social icons have been added and what CSS is affecting them it's hard to say, but the following snippet could be affecting them: 

 

 

.socialicons {padding: 15px 15px 20px 15px !important; display: block; text-align: center; height:30px; width: 160px; margin: 0 auto;}

 

 

If this class is applied to the icons they'll have a height of 30px on obile devices.

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
Lea
Participant

Still not working, can you tell me what info do you need from me to help me solving that issue ? 

0 Upvotes
Stephanie-OG
Key Advisor

Do you have a web page version of the email that you can link to so that we can take a look at the code?

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
0 Upvotes
Stephanie-OG
Key Advisor

Thank you for sending the link!

 

The issue is with the width set on the table around the icons:

 

<table align="center" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; width:32px; text-align:center" width="32">

I tested changing it to 150px, for example, and it seemed to work. You might also want to add a bit of padding around the icons, especially on mobile so users can click on them easily.

 

I hope that helps!

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
Lea
Participant

I made the edit but it is still not what i am looking to achieve. 

I want to have the social media icons aligned left on desktop and centered on mobile. Right now with those edits they are centered in both 

 

Also i don't know where to add padding to make them bigger (only on mobile)

0 Upvotes
Stephanie-OG
Key Advisor

The table is center aligned:

 

<table align="center" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; width:32px; text-align:center" width="32">

 

You could probably remove the align="center" and set the text-align to left. Give the table an ID and create a media query to center align it at the desired screen size. 

 

You can also add a class to the img tags and use a media query to give padding to that class at the desired screen size. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
Lea
Participant

I am sorry but it becomes a bit too technical for me here....Are you able to give me a step by step directions ? 

i don't know how to "Give the table an ID and create a media query "

neither how to "add a class to the img tags and use a media query to give padding"

 

I understand whta you want me to do but i don't knwo how actually doing it. 

0 Upvotes
Stephanie-OG
Key Advisor

You can give an HTML element an ID or class by adding id="myID" or class="myClass" respectively. Then in your stylesheet you can add styling to that id or class by referencing the id as #myID or the class as .myClass

 

To give the table an ID you would do something like:

 

<table id="center-on-mobile" 

(before the rest of the code) and in the CSS in your head add something like: 

 

@media (max-width:480px) { 
  #center-on-mobile { text-align: center; }
}

The same with the images, add a class after the image tag: 

 

<img class="padding-on-mobile" 

And then in the CSS in your head add: 

 

@media (max-width:480px) { 
  .padding-on-mobile { padding: 20px; }
}

Bear in mind that email templates are pretty tricky and don't always play nice with CSS that isn't inline (in the HTML itself), so it can be difficult to add different styling specifically on mobile. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

 

 

0 Upvotes
Lea
Participant

Ok it looks like your padding instructions worked. But the centered on mobile didn't. Can you check the code and tell me if i have done this right ?

 

Inside the module see where I put your code to give the table an ID 

{% set default_images_path = 'https://static.hsappstatic.net/content_shared_assets/static-1.4081/img/hs_default_template_images/modules/Follow%20Me%20-%20Email' %}
<table id="center-on-mobile" align="{{ module.alignment }}" style="width: 32px; text-align: {{ module.alignment }};">
  <tbody>
    <tr align="{{ module.alignment }}">
      {% for networks in module.social %}
      <td style="margin: 0 5px 0 0; line-height: 1">
        <a href="{{ networks.url }}">
          {% if networks.network == 'icon' %}
          {% if !networks.network_image.src %}
          {% set imgURL = default_images_path ~'/icon_circle_color-1.png' %}
          <img src="{{ imgURL }}">{% else %}<img src="{{ networks.network_image.src }}" width="{{ networks.network_image.width }}">{% endif %}
          {% else %}
          {% set imgURL = default_images_path ~'/'~ networks.network ~'_'~ module.icon_shape ~'_'~ module.color_scheme ~'.png' %}
          <img src="{{ imgURL }}" width="32px">
          <img class="padding-on-mobile">
          {% endif %}
        </a>
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>

And then in the additionnal head markup of the template, see where I put your code

 

<style type="text/css" data-hse-inline-css="true">
 body{font-family: arial, helvetica, sans-serif; }
        a {text-decoration:none; color:#444444;}
        .learn-more-btn { text-align: right;}
        .socialicons {padding:5px 0 0 0;}
        .social-icon img {width:32px; height:32px;}
        .social-icon td {margin-left:2px; display:inline-block;}
        #contentTableOuter { padding:0 !important; box-shadow:none !important; border:#e6e6e6 solid 0px !important; }
        .header-logo img {width:150px !important;}
        #contentCell {padding:10px 0 0 0 !important;}
        #headerTable {padding-right:0 !important;}
        h2 {font-family: arial, helvetica, sans-serif; font-size: 30px; margin-bottom: 21px;}
        h3 {font-family: arial, helvetica, sans-serif; font-size: 18px; margin-bottom: 15px;}
        ul {padding: 0 0 30px 30px !important; margin:0 !important;}
        ul li {line-height:30px !important; color:#2ea8e1;}
         ul li a {cursor:pointer; color:#2ea8e1; }
        p {font-family: arial, helvetica, sans-serif; font-size: 15px !important; line-height: 18px !important; padding: 0 0 30px 0 !important;
            margin: 0 !important;
        }
        td.footer-main p {padding:0 0 15px 0 !important; font-size:13px !important;}
       
        
    @media (max-width:767px) {
        .social-icon img {width:auto; height:auto;}
    }
     @media (max-width:500px) {
     .section-main {margin-top:30px !important;}
     }
    @media (max-width:480px) {
        .header-logo {padding:20px 15px 5px 15px !important; display:block; text-align:center;}
        .socialicons {padding: 15px 15px 20px 15px !important; display: block; text-align: center; height:30px; width: 160px; margin: 0 auto;}
        td.footer-main.column { padding: 15px 6% !important;}
        td.footer-main {padding: 15px 8% !important; width: 88% !important;}
      	#center-on-mobile { text-align: center; }
      	.padding-on-mobile { padding: 10px; }
    }
 </style>

I did it right ?

 

0 Upvotes