Remove padding/margin for customer reviews

Ziado4
Excursionist
18 0 3

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

Thanks!

Ziad G

Replies 2 (2)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Ziado4
Excursionist
18 0 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