Customized Social Media Module - no space between icons

[IrisW]

Hi, 

I am trying to customize our Social Media-Follow Us_module in our Email templates. I used the recommended code: 

<!--Name of Social Network--> <a href="URL of Account on Social Network"><img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load"></a>

It works fine except there is no space between the Icons (see picture). I am not sure what I am missing, as I did it exactly lik eshown above. But I am no Designer and do not have a lot of coding experince (I only can copy).

Does anyone have a suggestion?

Thanks a lot

Iris 

[Jsum · Accepted solution]

@IrisW,

You just need to add some margin between the icons.

I would first wrap them in a container you can target:

 <div class="social_container">   
    <a href="URL of Account on Social Network">
        <img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load">
    </a>
    <a href="URL of Account on Social Network">
        <img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load">
    </a>
</div>

and then add this to the css:

.social_container a {
    margin-right: 20px;
}

.social_container a:last-child {
    margin-right: 0px;
}

This is if the icons are left aligned. If right aligned change right to left in the css.

[cpk · Accepted solution]

I'm not 100% certain without looking at the live page itself, but I would imagine that you should be able to edit the code you used for each of the logos, and add

style="margin-right: 10px;"

before the end of the image tag. I would do this to all the images save the last one since the last image will not need to have additional spacing on the right. This is an example of what it might look like in practice:

<!--Facebook--> <a href="www.facebook.com/hubspot"><img src="cdn.hubspot.com/facebook.jpeg" alt="Facebook Account for HubSpot" style="margin-right: 10px;"></a>

In the above code, putting 'style=' tells the tag it is in--in this case the image tag--that is going to be stylized by whatever follows it in quotation marks (further documented here). In this instance, 'margin-right' is a style attribute that will add a right margin of 10px, or pixels (further documented here). Of course, you can change the dimension not to be 10px, but to be a different number of pixels that works best for you.

[IrisW]

Thanks a lot for your help!

Best

Iris 

[Jsum · Accepted solution]

@IrisW,

You just need to add some margin between the icons.

I would first wrap them in a container you can target:

 <div class="social_container">   
    <a href="URL of Account on Social Network">
        <img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load">
    </a>
    <a href="URL of Account on Social Network">
        <img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load">
    </a>
</div>

and then add this to the css:

.social_container a {
    margin-right: 20px;
}

.social_container a:last-child {
    margin-right: 0px;
}

This is if the icons are left aligned. If right aligned change right to left in the css.

[katepaulson]

Hi, 

I'm currently having this same issue. Could you please explain where I paste that first code to wrap them in a container?