Social Icons Spacing

[Basstimg]

I have 3 sites using theme x

On both my other sites I am using the following shortrtcode

[x_share title=“Share” facebook=“true” twitter=“true” google_plus=“true” linkedin=“true” pinterest=“true” email=“true”]

It works fine on the other sites and I have some css to make it styled to fit the site

.x-colophon.bottom .x-social-global a,
.page .x-entry-share .x-share{
font-size: 3.1rem !important;
height: 50px;
line-height: 50px;
width: 25px;

}

.x-colophon.bottom .x-social-global a i.x-icon-facebook-square,
.page .x-entry-share .x-share i.x-icon-facebook-square{
color: #3b5998;
}

.x-colophon.bottom .x-social-global a i.x-icon-twitter-square,
.page .x-entry-share .x-share i.x-icon-twitter-square {
color: #1da1f2;
}

.x-colophon.bottom .x-social-global a i.x-icon-google-plus-square,
.page .x-entry-share .x-share i.x-icon-google-plus-square {
color: #dd4b39;
}

.x-colophon.bottom .x-social-global a i.x-icon-instagram,
.page .x-entry-share .x-share i.x-icon-instagram {
color: #fd1d1d;
}

.x-colophon.bottom .x-social-global a i.x-icon-linkedin-square,
.page .x-entry-share .x-share i.x-icon-linkedin-square{
color: #00a0dc;
}

.x-colophon.bottom .x-social-global a i.x-icon-pinterest-square,
.page .x-entry-share .x-share i.x-icon-pinterest-square{
color: #ff2a13;
}

.x-colophon.bottom .x-social-global a i.x-icon-envelope-square,
.page .x-entry-share .x-share i.x-icon-envelope-square{
color: #ff2a13;
}

.page .x-entry-share .x-share:hover{
background-color: transparent;
}

.x-colophon.top {color:#fff;}
.x-colophon.top .h-widget,
.x-colophon .widget ul li a {
color: #f9f9f9;
}
#top > .x-colophon > .x-container > .x-social-global > .facebook > .x-icon-facebook-square:hover{
color: #3b5998;
}

#top > .x-colophon > .x-container > .x-social-global > .twitter > .x-icon-twitter-square:hover {
color: #1da1f2;
}

#top > .x-colophon > .x-container > .x-social-global > .linkedin > .x-icon-linkedin-square:hover {
color: #0177b5;
background color: transparent;important!;
}

#top > .x-colophon > .x-container > .x-social-global > .instagram > .x-icon-instagram:hover {
color: #fd1d1d;

}

.my-social a:hover {
opacity: .6;
}

body .ninja-forms-form-wrap input {
height: 2.65em;

}html body {
background: none black;

}.entry-content p {
margin-bottom: 12px;

This code makes the icons look great on the other sites but on the current site the icons look too narrow on the bottom (overlapping) and in section one they are too far apart with the spacing resulting in one dropping a line on mobile view too. I really need the styling to be consistant across all three sites can you help please

I have put all info of sites etc in secure note !

[ruenel]

Hello There,

Thanks for writing in a very detailed post information. Please have your code updated and use this instead:

.x-colophon.bottom .x-social-global a, .page .x-entry-share .x-share {
    font-size: 50px !important;
    height: 50px;
    line-height: 50px;
    width: 50px;
    margin-left: 5px;
    margin-right: 5px; 
}

px unit is more consistent than em, rem or percent.

Hope this helps.