Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

GilbertL
Tourist
7 0 0

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:

Social links current.jpg

 

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

Social links where I want.jpg

 

 

 

 

 

 

 

 

Thanks!

Accepted Solution (1)
EvinceDev
Shopify Partner
121 13 13

This is an accepted solution.

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

EvinceDev_0-1730963364047.pngEvinceDev_1-1730963391017.png

EvinceDev_2-1730963434334.png

 

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing

View solution in original post

Replies 7 (7)
GilbertL
Tourist
7 0 0

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
Shopify Partner
121 13 13

This is an accepted solution.

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

EvinceDev_0-1730963364047.pngEvinceDev_1-1730963391017.png

EvinceDev_2-1730963434334.png

 

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
GilbertL
Tourist
7 0 0

I tried doing this and it didn't change anything

GilbertL
Tourist
7 0 0

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!

finished product.jpg

GTLOfficial
Shopify Partner
658 140 133

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
74.png

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
GilbertL
Tourist
7 0 0

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
Tourist
7 0 0

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?