Remove padding/margin for customer reviews

Technical Q&A
1

Hello,

When a second review occurs on my page, the latest review gets a huge margin/padding compared to the first. How can I remove this?

Ziado4_0-1613845501137.png
Ziado4_0-1613845501137.png1313×501 17 KB

Thanks!

Ziad G

2

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.spr-review{
    padding-bottom: 0px !important;
}

#shopify-product-reviews{
    position: relative;
    margin-bottom: -40px;
}

@media (max-width: 767px){
    #shopify-product-reviews{
    position: relative;
    margin-bottom: -10px;
}
}

You can adjust the values as per your wish. Either negative or positive numbers will work.

-40px = bottom spacing of the entire reviews section on desktop
-10px = bottom spacing of the entire reviews section on mobile

Please let me know whether it works.

Kind regards,
Diego

3

Hi Diego,

Thank you so much, this almost solves my issue! However, I am trying to change the 0px and the -40px to decrease the spacing even more (I am on desktop), but it is not yielding any effects (the spacing stays the same). Any idea why?

Also, is there a way to reduce the spacing between the reviewer name and their review text?

One more time thank you so much!

Best,

Ziad