How can I reposition the social media icon

[Lcarey744]

In the footer, how can I put the social media icon next to the name, and remove the extra space?

Using dawn theme

https://nosafetyskateboards.com/

[vfre_di]

Make sure your link is added well in your Shopify store settings, in case you don’t know how to:

Go to your admin dashboard and customize your online store, then edit your footer and add your social media links. Hope this is helpful?

[Patriachxpart]

Hello, how are you doing?

What’s probably happening is that the icon and the text are being treated as separate block elements or just spaced out awkwardly by default CSS. What you want instead is for them to feel like they belong together like a team.

The way to fix it is by wrapping each icon and its name inside a single container and styling them with something like inline-flex, so they align horizontally. Then, gently adjust the spacing between the icon and the name so they’re cozy but not cramped. You can also fine-tune the font size and color to match your site’s aesthetic.

Once you do that, you’ll have a footer that feels intentional like every part of it was thoughtfully placed, down to the last pixel. It’s a small detail, but those are the ones that quietly shout, “This brand knows what it’s doing.”

If you want me to peek at the actual code, I’d be happy to. You’re almost there

[namphan]

Hi @Lcarey744 ,

Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}
.footer__content-top {
    padding-bottom: 0 !important;
    width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer__content-bottom-wrapper--center {
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}
.footer__copyright {
    margin-top: 0 !important;
}

[Lcarey744]

Thank you. Now the social is positioned correctly and the link works, but is not visible?

[namphan]

Hi @Lcarey744 ,

Can you add the code back or send me the preview link where the code is added? I will check it again

[vfre_di]

Try what I suggested.

[Lcarey744]

Here you go

https://nosafetyskateboards.com/?_ab=0&_fd=0&_sc=1

[namphan]

Hi @Lcarey744 ,

Can you send me preview link? refer to following instructions

[Lcarey744]

https://nosafetyskateboards.com/

sorry, is published here

[namphan]

Hi @Lcarey744 ,

Please add code:

.footer-block--newsletter {
    transform: none !important;
}
.footer__content-bottom {
    padding-top: 0 !important;
    border: none !important;
}

[Lcarey744]

I added this code underneath the first. Is now only showing the social icon?

[namphan]

Hi @Lcarey744 ,

Please change code:

.footer__content-bottom {
    padding-top: 0 !important;
    border: none !important;
}

=>

.footer__content-bottom {
    transform: none !important;
    padding-top: 0 !important;
    border: none !important;
    opacity: 1 !important;
}

[Lcarey744]

Thanks this working for now for desktop, but not for mobile?

[namphan]

Hi @Lcarey744 ,

Please change code:

.footer-block--newsletter {
    transform: none !important;
}

=>

.footer-block--newsletter {
    opacity: 1 !important;
    transform: none !important;
}

[Lcarey744]

Social now appears on mobile, but on desktop the position of name and year is too low?

[namphan]

Hi @Lcarey744 ,

I checked and you added extra ‘}’, please remove the code, it will work fine

[Lcarey744]

Sorry, removed } looks good now. Thank you very much

[namphan]

Hi @Lcarey744 ,

You’re welcome and happy to help