Dawn Theme - How can I centre a product / variant price on a product page?

Store Design
,
1

Looking to centre my product pricing on mobile, anyone know how I can make this possible?

shanagarryceo_0-1677588508158.png
shanagarryceo_0-1677588508158.png704×260 22.1 KB

Thanks

2

Hi @shanagarryceo ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-price.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    .product__info-wrapper .price {
        text-align: center !important;
    }  
}

PageFlyRichard_0-1677588913774.png
PageFlyRichard_0-1677588913774.png368×514 17.3 KB

I hope it would help you
Best regards,

Richard | PageFly

3

@shanagarryceo

to make product pricing center in mobile follow below steps:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > component-price.css and paste this at the bottom of the file:
@media only screen and (max-width:767px){
 .price.price--large{
  text-align: center !important;
 }
}

This works well for your site

Best Regards !

4

Amazing as always Richard! However can I ask how I would also centre this entire section?

shanagarryceo_0-1677588999058.png
shanagarryceo_0-1677588999058.png710×482 47.1 KB

So I also want to centre the variants and the inventory status.

5

Hi @shanagarryceo ,

I checked it looks like you already have a solution for small screen mobile, right?
But on larger mobile screens, it doesn’t seem like it’s center yet

PageFlyRichard_0-1677657530261.png
PageFlyRichard_0-1677657530261.png394×653 93.6 KB

I hope it would help you
Best regards,

Richard | PageFly

If you want center then you can try this solution:

You can try below code in Asset->/section-main-product.css file:

@media screen and (max-width: 749px) {
    .product-form__input,
    .product-form__buttons {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}