Align the price and reviews text to the center

Store Design

Topic summary

A user seeks help centering the price and review stars on product pages for mobile devices. They’re using the Dawn theme with the Vitals reviews app.

Solutions Provided:

Two community members offered CSS code snippets to add to the base.css file:

  • Made4uo-Ribe provided mobile-specific code targeting .price__container and the Vitals review stars class with @media queries for screens under 749px
  • LizHoang suggested simpler CSS targeting .price.price--large.price--on-sale.price--show-badge

Current Status:

The solutions work partially—centering occurs on most products but fails on at least one specific product. The review stars alignment remains unresolved. Made4uo-Ribe offered additional code but noted it would center on desktop too, asking if mobile-only centering is preferred.

Outstanding Issues:

  • Inconsistent centering across all products
  • Review stars still not centered
  • Need for mobile-only solution confirmed but not yet implemented
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
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).

1 Like
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.