Hi,
I was wondering if someone could please help me with centering the social media icons on the Canopy theme? It currently looks like this:
The code currently shows as this:
.social-links {
margin: 0;
display: flex;
flex: 50%;
text-align: center;
}
.social-links .social-links__list {
padding: 0;
margin-top: 1em;
}
.social-links li {
display: inline-block;
margin: 0 0.3em 0.5em;
}
.social-links li:last-child {
margin-right: 0;
}
.social-links a {
display: inline-block;
}
.social-links a:hover {
opacity: 0.8;
}
.social-links svg {
width: 17.1px;
height: 17.1px;
overflow: visible;
}
.social-links svg, .social-links svg g {
fill: currentColor;
}
.social-links img {
width: auto;
height: 19px;
vertical-align: middle;
max-width: none;
}
Thank you in advance for any help!
Kind Regards,
Jennifer
1 Like
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hi,
Thank you for your quick reply!
I’ve sent my URL and password to your e-mail 
Kind Regards,
Jennifer
1 Like
Hi @jenniferwfd , Please share store url and I can help you.
Thank you.
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >styles.css and paste this at the bottom of the file:
div#shopify-section-footer .column.half .social-links {
position: unset;
}
div#shopify-section-footer .social-column.align-right-desktop.half.column {
width: 100%;
}
div#shopify-section-footer .page-footer .signup-row {
flex-wrap: wrap;
margin: 0 auto;
justify-content: center;
padding-bottom: 0;
display: flex;
}
div#shopify-section-footer .social-links .social-links__list {
margin-bottom: 0;
}
div#shopify-section-footer .page-footer .signup-row .extra-column.half.column {
max-width: 448px;
margin: 0 auto;
}
Hi,
Thank you very much for your help!
I have just tried to input the code, but the social media icons are still on the left and it doesn’t appear to move unless you shrink the page size. I have attached some screenshots below.
Kind Regards,
Jennifer
