How to Move and Center Social Media Icons Below Email Sign Up

[GilbertL]

I'm using the latest version of the Dawn theme. How can I keep my email signup box centered in my footer and get my social media icons to be centered below it? The default is to have the email signup box be all the way to the left and the social media buttons to be all the way to the right. This default setup leaves a lot of dead space between the two and it makes the webpage look poorly made. Here is a screenshot of what it currently looks like:

And here is roughly what I want (blue arrows pointing to where I want the social media icons to go:

Thanks!

[GilbertL]

I'm having a hard time finding where to place the code. Can you tell me exactly which line to replace or where to add code? thepinenutstand.com

Thanks

[EvinceDev · Accepted solution]

Hello @GilbertL , below screenshot added, follow this process to get your desired result.

[GilbertL]

I tried doing this and it didn't change anything

[GilbertL]

As a beginner this was extremely difficult for me to figure out how to do. However, after spending several nerve wracking hours of reading and rereading the code in the screenshots I was able to implement the code into my website and it turned out beautifully. Thank you!

[beautyboulevar_]

do you have a code?

[PolarFlaps]

you dont need the code just follow the same steps that GilbertL did. I have absolutly no coding experience and i followed along the 3 screenshots and it worked. Just find the places in the section-footer.css code that were boxed in red in the screen shots and delete the crossed out lines and modify any changed lines.

[GTLOfficial]

Hello @GilbertL 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-footer.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.footer-block__newsletter:not(:only-child) {
text-align: center !important;
}
.footer-block__newsletter:not(:only-child) .footer__newsletter {
justify-content: center;
margin: auto;
}
.list-payment {
padding-right: 9rem !important;
}
.footer__payment {
margin-top: -9.5rem !important;
}
.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright {
text-align: left;
padding-left: 11rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[GilbertL]

This looks like a solution to move over the subscription box to a more centered location. But it doesn't move the social media icons underneath the email subscription box like I wanted.

[GilbertL]

I like the way this looks, however, I tried every way possible to add it to my code and it doesn't seem to change my website at all. Can you send me a screenshot of what the code is supposed to look like with the other code and where it is supposed to be placed?