Star Ratings position on Featured Collection Mobile & Desktop

[HereNowOwner]

Hi everyone,

I'm trying to reposition the star ratings widget on the featured collection on mobile & desktop. After activating this widget through the Judge.Me app I haven't been able to position it correctly through the settings / code. 

Below the screenshots of the desktop & mobile positions of the review widget and the location I would like it to so it aligns again with the rest. 

Mobile: 
Move star rating widget down and price position up so that price is aligned again and star rating are on the bottom of the product preview.

 Desktop:
Move star rating to the centre under the product and move price to original position so it aligns again with the rest.

 
Could anyone help me how this could be re-alligned through some code? 
Thanks in advance!!

Store: https://herenowbrand.com/

[Made4uo-Ribe · Accepted solution]

Hi @HereNowOwner 

Check this one. 

But got problem with the count ratings on the mobile.

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:

div.card__information > div {
    display: flex;
    justify-content: space-around;
}

div.card__information > div .rating {
    margin-top: -8px !important;
}

div.card__information > div p.rating-count.caption {
    margin-top: -4px !important;
}
@media only screen and (max-width: 749px){
div.card__information > div {
    display: flex;
    justify-content: space-around;
    flex-direction: column-reverse;
    gap: 5px;
}
}

• And Save.
• Result:
• 

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

[HereNowOwner]

Hi @Made4uo-Ribe 

Thanks a lot for the fast reply. This indeed is almost spot-on. I've already implemented it and it looks 10x better. I would still like to have the counter in the same row as the stars on mobile. If you do still find a solution for that please share it 🙂 

[Made4uo-Ribe]

There is a solution for this, but it requires editing the Liquid code. This is not the first time I’ve encountered this issue—another store owner had the same problem. The rating count is in a different container than the stars (image), which causes this result.