Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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:
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!
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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.
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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?
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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!
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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.
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Follow me icons - Edit size and mobile alignment
Follow me icons - Edit size and mobile alignment
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.
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
