Moving Shopify Product Reviews on Debut Theme.

[Jose13]

I managed moving the reviews widget on my product page below the cart. Thing is, now that it is "outside" the product.description section, the review go full screen on mobile. I would love to for it to have a small margin when using mobile. Here's an example, below the description you can click on the reviews.

[oscprofessional]

Hello Jose13,

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
#shopify-product-reviews:before, #shopify-product-reviews:after {
    margin-top: 20px;
}
.text-center.return-link-wrapper {
     margin-left: 15px;
    margin-right: 15px;
}
.return-link-wrapper {
    margin: 25px;
}
}

[Jose13]

Hey! 

Thanks a lot for your replay! It didn't work, though. The reviews starts at the very edge of the screen and it's a bit hard to read. I'm attaching a screenshot!

[oscprofessional]

Can you share url for this screen?

[Jose13]

Sure! It's my only reviews lol, here it goes:


https://coolpebbles.com.mx/collections/sobremesa/products/frutero-de-mimbre-candela

[oscprofessional]

Hello Jose13,

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
div#reviews_775829815353 {
    margin-left: 15px;
    margin-right: 15px;
}
}

[Jose13]

It worked great! But only for that specific page/review, the other product I had recently reviewed is this one but it does not have the margin

https://coolpebbles.com.mx/collections/decoracion/products/vela-spin

[oscprofessional]

Ok.

Remove that css:
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
.spr-reviews {
    margin-left: 20px;
    margin-right: 20px;
}
}

This will works for all reviews.

[Jose13]

It didn't work haha, this last one has the review without the margin again!

[oscprofessional · Accepted solution]

Ok.

Remove that css that was not worked because of iframe.:
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
.product-single div#shopify-product-reviews {
    margin: 0 20px !important;
}
}

 This will work.