How can I align my product reviews for mobile display?

Topic summary

Main issue: On mobile, the product rating ★★★★★ and “(64 reviews)” appear misaligned; the goal is to display them neatly in a single, straight line similar to desktop.

Context: The poster provided desktop and mobile screenshots plus a screenshot of their code (no raw code), making the visuals central for understanding the problem.

Proposed fix: Wrap the rating/review text in a block-level element (e.g.,

or

) or enforce block display (style=“display:block”) to control line breaks on mobile. Also suggested: make the rating/count a link to the actual reviews and avoid hardcoding review numbers to maintain credibility.

Troubleshooting guidance: Share store URL or preview link, storefront password (if applicable), theme name, and any relevant app involvement. For browser issues, include browser/version and OS to help reproduce.

New request: How to place trust badges below the Add to Cart (ATC) button. No implementation steps provided yet.

Status: Partially addressed. A general layout approach was offered, but specific theme/code details are missing, and the trust badges question remains unanswered.

Summarized with AI on January 16. AI used: gpt-5.

Hey there,

I want my ★★★★★ (64 reviews) to appear on the mobile version as how it appears on desktop version.

This is a desktop screenshot and here the: ★★★★★ (64 reviews) is good

This is mobile version and the ★★★★★ (64 reviews) looks really ugly, i want it in a straight line

And this is the code im using:

Please help me fix this! I basically want it how it appears on desktop but then on mobile ★★★★★ (64 reviews)

Wrap that tesxt in a

tag or
that should push it to a new “row”

Or enforce it as a block

tag or

I’d also recommend this be a link to the actual reviews, just hardcoding a random value or reviews that can’t be inspected or don’t match the actual amount of reviews will instantly make savvy customer suspicious and not trust your site.

Beyond that keep always in mind others do not see what you see or know what you know.

Provide product page store url, storefront password , theme name when communicating theme issues.

Always provide relevant context so others can understand, inspect or reproduce issues.
Make sure any links are publicly accessible by testing in an incognito window to see how another person would encounter it.
Context such as: For theme problems always provide store url or preview urls, exact demo urls, storefront password if any, theme name, example code, are any apps involved , etc . For browser problems browser name& version, operating system, etc.

Okay thanks another question,

How do i add like trust badges underneath my ATC button???