Debut Theme - Social share icon is truncated/broken. How to fix it?

Store Design
1

Hello,

Does anyone know how to fix the Facebook social share icon that is not displaying as it should?

Cheers!

Screen Shot 2021-07-29 at 1.57.48 pm.png
Screen Shot 2021-07-29 at 1.57.48 pm.png2588×1422 262 KB

https://als.net.au/products/hand-sanitiser-gel-500ml

2 
ul.social-share {
    margin-top: 20px;
    text-align: left;
    display: inline-flex;
}
and 
ul.social-share li:last-child {
    margin-right: 0;
    display: inline-flex;
}

go to theme.scss.liquid, change this above

3

hello @OMDIGI

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

ul.social-share {
    margin-top: 20px;
    text-align: left;
    display: inline-flex;
}
ul.social-share li:last-child {
    margin-right: 0;
    display: inline-flex;
}
4

Hi @eComInsider

Thanks for taking the time to help me. Much appreciated!

The icons are now displaying in the same line, however, Facebook second icon is still truncated. Any ideas?

Screen Shot 2021-07-29 at 2.28.03 pm.png
Screen Shot 2021-07-29 at 2.28.03 pm.png2556×1414 264 KB

This is the code:

ul.social-share {
margin-top: 20px;
text-align: left;
display: inline-flex;
li {
display: inline-block;
text-align: left;
margin-right: 12px;
&:last-child {
margin-right: 0px;
display: inline-flex;
}
&.facebook {
.fb-like > span {
vertical-align: 0px !important;
}
}
}
}
span[class*=“_button_pin”][data-pin-x] {
margin-right: 44px;
}

5

https://chrome.google.com/webstore/detail/shopify-theme-file-search/mhchmhfecfdpaifljcfebnlaiaphfkmb?hl=en

download above chrome extention, and it will allow you to search file in all over theme, search for share bottom or turnccated etc, you will figure out yourself, where is the issue.