How to center social icons and subscribe button on mobile view?

[JHarrisQV]

Hello!

I am a bit stuck and could do with some help. I have a footer which currently shrinks when the webpage size is reduced. But I am looking for when it reaches mobile size, to shift the social icons from alongside the subscribe button to below and also for the subscribe and social icons to be centered when viewing on mobile.

Currently it looks like this at mobile size:

I am hoping to get it look like below (edited the screenshot to make it clear)

Any advice or help would be greatly appreciated.

Store link: https://quotedvisually.myshopify.com/

Store pass: Han

Thanks in advance, I hope my message above is clear.

Regards,

Jonathan

[made4Uo]

Hi @JHarrisQV

You can do the following to adjust your footer layout

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 750px) {
    .footer__content-top.page-width {
    display: flex;
    flex-direction: column;
}

.footer__content-top.page-width .container {
    width: max-content;
    margin: auto;
}
}

Result here:

[shreyhweb]

@JHarrisQV

Hello,

please add below code above in theme.liquid

online store >> edit code >> theme.liquid

@media screen and (max-width: 767px) { footer.footer .footer__content-top { flex-direction: column!important; } }

after added looks

if our solution important for you then please like the post and tap on accepted.

Thankyou

[JHarrisQV]

Hey @made4Uo ,

Thanks so much for this, it worked perfectly!

I appreciate all your help.

[JHarrisQV]

Hey @shreyhweb ,

Thanks for replying to this so quickly, it also worked perfectly.

I appreciate your help.