Star Ratings Above Product Titles Across All Screen Sizes (Dawn)

[manbru]

Hello,

I've used this code to try and position the star ratings in product cards above the title but it looks different on almost every screen. So i was wondering how to without any padding/marginal/position place the star rating above the product title in product cards.

The code i've tried with:

<style>
  .collection-icon-list.vstar-star {
    top: -110px !important;
    position: relative !important;
    margin-top: 0px;
  }

  .card__heading {
    margin-top: 0px;
  }
</style>

↓

My store and I removed the code above from the theme.liquid file so it has the default position of the rating right now: https://r1vex.myshopify.com/ 

↑

Example of how i want it to look on any screen size:

 

Thanks for helping!

[BSSCommerce-HDL]

Hi @manbru, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (min-width: 500px) {
.collection .collection-icon-list.vstar-star {
    top: -68px !important;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[manbru]

Thanks for your reply, but this doesn't position the star rating above the product title:

 

[BSSCommerce-HDL]

Hi @manbru, Pls replace old code to this new code: 

<style>
@media only screen and (min-width: 500px) {
    .collection .collection-icon-list.vstar-star {
        top: -68px !important;
        position: relative !important;
    }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Rahul_dhiman]

Hello @manbru 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.collection-icon-list.vstar-star {
top: -65px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks