Canvas Support

Social Icons Centred

5 replies·opened Jun 26, 2022
K
Karma77Jun 26, 2022

Hi,

I am trying to add social icons to 4 columns and centre them, but I'm finding it almost impossible to achieve.

Can anyone advise where I'm going wrong?

Thank you

S
SemiColonWebSTAFFJun 27, 2022

Hello,

Consider using this code:

<div class="row text-center">
    <div class="col-md-3 tmp-col-a">
        <a href="#" class="social-icon d-inline-block si-small si-rounded si-colored si-facebook tmp-lnk-a"><i class="icon-facebook"></i><i class="icon-facebook"></i></a>
    </div>
    <div class="col-md-3 tmp-col-b col-centered center-block">
        <a href="#" class="social-icon d-inline-block si-small si-rounded si-colored si-twitter tmp-lnk-b"><i class="icon-twitter"></i><i class="icon-twitter"></i></a>
    </div>
    <div class="col-md-3 tmp-col-c center-block justify-content-center">
        <a href="#" class="social-icon d-inline-block si-small si-rounded si-colored si-pinterest"><i class="icon-pinterest"></i><i class="icon-pinterest"></i></a>
    </div>
    <div class="col-md-3 tmp-col-d center-block justify-content-center">
        <a href="#" class="social-icon d-inline-block si-small si-rounded si-colored si-email3"><i class="icon-email3"></i><i class="icon-email3"></i></a>
    </div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
Karma77Jun 27, 2022

Hi,

Thank you for the response, unfortunately this still isn't working - I've re-uploaded the changes.

K
Karma77Jun 27, 2022

Also, there is a gap at the bottom of the page - should I create another ticket? It doesn't seem to be in the HTML or CSS.

S
SemiColonWebSTAFFJun 28, 2022

Hello,

Apologies for the Inconveniences caused!

  1. Consider using this Code instead for the Social Icons:
<div class="row text-center">
    <div class="col-md-3 tmp-col-a">
        <a href="#" class="social-icon inline-block mb-0 si-small si-rounded si-colored si-facebook tmp-lnk-a"><i class="icon-facebook"></i><i class="icon-facebook"></i></a>
    </div>
    <div class="col-md-3 tmp-col-b col-centered center-block">
        <a href="#" class="social-icon inline-block mb-0 si-small si-rounded si-colored si-twitter tmp-lnk-b"><i class="icon-twitter"></i><i class="icon-twitter"></i></a>
    </div>
    <div class="col-md-3 tmp-col-c center-block justify-content-center">
        <a href="#" class="social-icon inline-block mb-0 si-small si-rounded si-colored si-pinterest"><i class="icon-pinterest"></i><i class="icon-pinterest"></i></a>
    </div>
    <div class="col-md-3 tmp-col-d center-block justify-content-center">
        <a href="#" class="social-icon inline-block mb-0 si-small si-rounded si-colored si-email3"><i class="icon-email3"></i><i class="icon-email3"></i></a>
    </div>
</div>
  1. The Entire Page is enclosed inside the <form> Tag which is why there is a gap at the bottom of the Page. Add the .mb-0 Class to the <form> Tag.

This will automatically fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
Karma77Jun 29, 2022

Thank you! Works great :)

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard