Left align product reviews

Store Design

Topic summary

A user needed help left-aligning product review stars on mobile view for their Prestige theme store. The stars were displaying center-aligned by default.

Solution provided:

  • Add custom CSS targeting the review star rating element with display: flex
  • Use a media query for screens max-width 600px
  • Include !important flag to override existing styles

Implementation:

  • Code should be added to the theme.css file
  • Initial attempt without !important didn’t work
  • Final CSS successfully resolved the alignment issue

Status: Resolved. The user confirmed the corrected CSS code worked as intended.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
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.

houseof9_0-1748653719616.png
houseof9_0-1748653719616.png523×999 160 KB

2

Hi @houseof9

let try to add this custom CSS code:

@media only screen and (max-width: 600px) {
    #shopify-section-template--16816236462178__main .tydal-reviews-star-rating {
        display: flex;
    }
}

BiDealDiscount_0-1748657530917.png
BiDealDiscount_0-1748657530917.png594×857 163 KB

3

Thank you, unfortunately it did not work. I tried to add it to the theme.css file, is that the correct way? If so, it did not work.

4

can you add to your file theme.css to let me check why it not work?

5

Thanks, I have just added it

6

Oh I see the issue.

please replace the code with this code:

@media only screen and (max-width: 600px) {
    #shopify-section-template--16816236462178__main .tydal-reviews-star-rating {
        display: flex !important;
    }
}
7

Thanks so much that worked!