DAWN Theme: center the footer social icons & Subscribe box on mobile and desktop

Store Design
1

Hello,

Does anyone have code to center the Footer social icons & Subscribe box on mobile and desktop for the Dawn theme.

I would like the social icons to to be first with the Subscribe box below it on desktop and mobile.

url: preacha.com

Thank you

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.footer__content-top .footer-block--newsletter .footer-block__newsletter {
width: 100%;
text-align: center;
order: 2;
}

.footer__content-top .footer-block--newsletter {
display: flex;
flex-wrap: wrap;
}

.footer__content-top .footer-block--newsletter .footer-block__newsletter form#ContactFooter {
justify-content: center;
margin: auto;
}

.footer__content-top .footer-block--newsletter ul.footer__list-social {
justify-content: center;
}
3

Thank you for the reply but I don’t have “theme.scss.css” in the Dawn theme.

Can you double check that for me please.

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >section-footer.css and paste this at the bottom of the file:
.footer__content-top .footer-block--newsletter .footer-block__newsletter {
width: 100%;
text-align: center;
order: 2;
}

.footer__content-top .footer-block--newsletter {
display: flex;
flex-wrap: wrap;
}

.footer__content-top .footer-block--newsletter .footer-block__newsletter form#ContactFooter {
justify-content: center;
margin: auto;
}

.footer__content-top .footer-block--newsletter ul.footer__list-social {
justify-content: center;
}
3 Likes
5

Thank you!!!

1 Like
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

7

Hi,

I tried this code and it only move newsletter block. I am looking to center my social media icons only on both desktop and mobile view.

1 Like
8

Hello @Sashaly

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.footer .footer__content-top .footer__list-social {
    position: absolute!important;
    right: 47%;
}
@media (max-width:767px){
.footer .footer__content-top .footer__list-social{
    position: initial!important;
}
}

Desktop screenshot :-

ZestardTech_0-1686292764730.png
ZestardTech_0-1686292764730.png400Ă—158 16.3 KB

Mobile screenshot :-

ZestardTech_1-1686292764733.png
ZestardTech_1-1686292764733.png400Ă—350 19.3 KB

1 Like
9

Thank you so much! you are a genius!

1 Like
10

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

11

Hello, thank you for your code that repositioned the logos of social networks in the center!
However, can you add a code to center the “suscribe: email” section in the middle of the page and position it above the two social network icons, on computer.

Best regards.