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

OMDIGI
New Member
2 0 0

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

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

 

 

0 Likes
aio_xp
Pathfinder
82 7 26
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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Feel free to contact me on kuparkoti@gmail.com regarding any help
Shopify Expert | Whatsapp: 00971568836211

0 Likes
Natztech
Shopify Partner
1889 489 1171

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
OMDIGI
New Member
2 0 0

Hi @aio_xp 

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

 

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;
}

0 Likes
aio_xp
Pathfinder
82 7 26

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. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Feel free to contact me on kuparkoti@gmail.com regarding any help
Shopify Expert | Whatsapp: 00971568836211

0 Likes