Align the price and reviews text to the center

Store Design
1

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.

SAS37_1-1740497368336.png
SAS37_1-1740497368336.png911×617 54.2 KB

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

2

Hi @SAS37

Please, share your store URL. Thanks!

3

Hi @SAS37 , can you share store url??

4

www.reduceriexpress.ro

5

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;
}
}

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

6

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:

LizHoang_0-1740503183467.png
LizHoang_0-1740503183467.png366×480 74 KB

Best,

Liz

7

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.

8

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-pliabila-cadou

Why is this happening?

9

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:

Made4uoRibe_0-1740517975048.png
Made4uoRibe_0-1740517975048.png636×483 37.3 KB

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

10

Still doesn’t work.

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