How to center button and Footer text for mobile only

[GeorgeRizos]

Hi there, 

I would like to center this button on my website for mobile view only.

I also would like to center these texts boxes on mobile view only.

 

my website url is: https://thesnoozy.com/

[Moeed · Accepted solution]

Hey @GeorgeRizos 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
div#ImageWithText--template--19311720202589__4498c6aa-31c3-4fae-8565-7f41780e682f {
    text-align: -webkit-center;
}
a.button.button--primary {
    place-self: center;
}
h2.footer-block__heading.inline-richtext {
    text-align-last: center;
}
a.link.link--text.list-menu__item.list-menu__item--link {
    justify-content: center;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ZestardTech]

Hello there,

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:

@media screen and (max-width: 769px){
#shopify-section-template--19311720202589__4498c6aa-31c3-4fae-8565-7f41780e682f .button {
margin: 0 auto;
margin-top: 10px;
}
.footer-block.grid__item.footer-block--menu {
margin: 0 auto;
text-align: center;
}
.footer-block__details-content .list-menu__item--link {
justify-content: center;
}
}

[David_SHT]

Hi @GeorgeRizos ,

This is David at SalesHunterThemes.

Thank you for your question. 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 749px) {
 .footer-block.grid__item {
   text-align: center !important;
 }
 .footer-block__details-content .list-menu__item {
   justify-content: center !important;
 }
}
</style>

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team