How can I position the 'Shop Now' button to bottom center on mobile?

[haleygray16]

I want the SHOP NOW button to be bottom center on mobile. Its center on desktop but its still showing middle right on mobile.

[haleygray16]

[Dan-From-Ryviu]

Hi @haleygray16 ,

Please add this CSS code at the bottom of your base.css file in store admin > Sale channels > Online store > Themes > Edit code > Assets

.banner__box.color-background-1 {
    display: flex;
    justify-content: center;
}

Here is result

[haleygray16]

I want it bottom center

[irene-vintage]

Hello @haleygray16 ,

You can try to follow these steps:

• Go to Online Store → Themes → Actions → Edit code
• Go to Assets folder → base.css file → add this following code at the bottom of page

@media only screen and (max-width: 767px) {
  .button-class {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
}

• Save and preview

Hope this can help you out. Let us know if you need anything else.

Ali Reviews team.

[haleygray16]

that didn’t work

[Dan-From-Ryviu]

Please update code like to this

@media screen and (max-width: 749px) {
.banner__box.color-background-1 {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0px;
}
.banner__buttons {
    position: absolute !important;
}
}

[haleygray16]

Thank you so much!!

[Dan-From-Ryviu]

Happy I could help.