Align the price and reviews text to the center

[SAS37]

Hello there!

So i'm trying to align the price and the reviews on the center, and after I tried many different ways from the shopify community, which none of them helped me, I'm asking you, please, to help me.

I'm using the latest Dawn theme and as reviews program i'm using Vitals (if matters).

[Made4uo-Ribe]

Hi @SAS37 

Please, share your store URL. Thanks!

[SAS37]

www.reduceriexpress.ro

[Made4uo-Ribe]

Thanks for the info try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.price__container {
    text-align: center;
}

.Vtl-pr-review-stars-snippet.vtl-pr-review-stars-snippet.vtl-pr__product-title-star-snippets {
    justify-content: center !important;
}
}

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SAS37]

Thank you a lot!

It works. But not for all products. Except for this one: https://reduceriexpress.ro/products/set-2-1-gratis-cutie-depozitare-cu-cadru-metalic-si-ferestre-pli... 

Why is this happening?

[Made4uo-Ribe]

Im not sure, maybe this is the default one. Please add this code on the base.css or where you paste the code. 

.price.price--large.price--show-badge {
    text-align: center;
}

And Save. 

THis also center align on the dekstop. Let me mw know if you only want in mobile screen only. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SAS37]

Still doesn't work.

And yes, I want for mobile if you can, please.

[LizHoang]

Hi @SAS37 , can you share store url??

[LizHoang]

Hi @SAS37 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.price.price--large.price--on-sale.price--show-badge {
    text-align: center !important;
}

Result: 

Best,

Liz

[SAS37]

Thank you, Liz.

It works. But no on all products.

On the example product I showed it doesn't work, but on other products it shows in the middle. Why is that?

And the star reviews also doesn't work, but as I see you showed me the code only for the price.