How to adjust the review box size in Debut theme

Solved
Tourist
6 0 0

Hi Shopify Community,

Is there anyone who can help me out resolve this problem?

I'd like to adjust the size of the review box and can't seem to find where or how. I'm using the 'Product Reviews' app from Shopify. It now stretches horizontal all over the length of the browser but I'd like it to be way smaller, please see below. 

Santoe_0-1606911843514.png

 

It's the same on the mobile version, but I don't mind that because it's an small device. So you don't have the enormous empty space. I am using the Debut theme. If there is anymore information needed from me, please let me know so I can provide. Looking forward to an solution!

 

Thank you so much Shopify Community!

0 Likes
Shopify Partner
1456 142 199

@Santoe - can you please share product page with this review tab? and password to view page, if any

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Tourist
6 0 0

Thank you so much for replying @suyash1, this is the link to one of my products: https://jijverdienteensticker.nl/collections/frontpage/products/beloningsstickers-voor-volwassenen

It's this size underneath every product and I like to adjust it like the example above.

 

0 Likes
Shopify Partner
1456 142 199
add following css to the end of theme.scss file and check

#shopify-product-reviews{ width: 60%; margin: 0 auto;}

you are welcome to contact me.
My email - suyash.patankar@gmail.com
Tourist
6 0 0

@suyash1 I followed the instructions and it kinda works, but is now sticking to the left side of the browser. Is there a way to get it in the middle? Please see below.

 

Santoe_0-1606919706364.png

 

0 Likes
Shopify Partner
1456 142 199

This is an accepted solution.

make that margin:0 auto ; as margin: 0 auto !important; it should work
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Tourist
6 0 0

@suyash1 tried that, but it doesn't work? Or I did it incorrectly as I have little to no knowledge of coding. 

Santoe_0-1606920738879.png

this is how my website looks now (I did create a back-up, no worries):

Santoe_1-1606920860737.png

 

 

0 Likes
Shopify Partner
1456 142 199

@Santoe - just remove that semicolon ( ; ) after auto and it will work absolutely fine.

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Tourist
6 0 0

You're absolutely right! Thank you so much for your help, could've had saved me days of headaches if I reached out earlier to the community. You just made my day! Works perfect.

I have on last question where I would like to use your expertise, if you don't mind. How can I get more room between the buttons and the review box? Please see below.

Santoe_1-1606921632079.png

 

 

 

0 Likes
Shopify Partner
1456 142 199

@Santoe 

add one more line of css - margin-top: 30px !important;  so entire css becomes

#shopify-product-reviews { width: 60%; margin: 0px auto !important; margin-top: 30px !important;}
 
this should work and adjust numbers as per need
you are welcome to contact me.
My email - suyash.patankar@gmail.com