Left align reviews on product page - prestige theme

Store Design
1

Does anyone know how l can left align my product review stars on my product pages on mobile view? They are currently centre aligned - see below. I am using prestige theme.

Screenshot 2025-04-27 at 1.04.38 pm.png
Screenshot 2025-04-27 at 1.04.38 pm.png752Ă—1436 93.2 KB

1 Like
2

can you share a link please to your product page

3

Hi @abhicadisoft ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css / theme.css.liquid file and paste the code in the bottom of the file.
@media (max-width: 768px){
.product-info__block-item {
    text-align: left !important;
}
}
4

Go to your online store → edit code → theme.css file and paste this code in the end of file

div#shopify-block-ARzBOaU1hV3Y4MEwxM__tydal_reviews_star_rating_FNhbLK {
    display: grid !important;
}

AsadMahmood_0-1746097072643.png
AsadMahmood_0-1746097072643.png299Ă—246 5.95 KB

5

Hi @houseof9

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: 600px) {
.product-info__block-item div#shopify-block-ARzBOaU1hV3Y4MEwxM__tydal_reviews_star_rating_FNhbLK {
    text-align: left !important;
}
}

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

6

Thank you!

7

Hello @houseof9,

Regarding your requirement to left-align your product review stars on your product pages on mobile view, you can follow the given process:

1.Navigate Online Store > Themes > Click “Customize” on your prestige theme.

2.Click on “Edit code.”

3.In the Assets folder, look for a file like theme.css, base.css, or styles.css. Open it.

4.Add this given CSS code to the bottom.

@media screen and (max-width: 749px) {

.product-info__block-item  div#shopify-block-ARzBOaU1hV3Y4MEwx {

text-align: left ! important;

justify-content: flex-start ! important;

}

}

5. Save changes.