How to adjust the review box size in Debut theme

Solved
Santoe
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
suyash1
Shopify Partner
3016 329 504

@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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Santoe
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
suyash1
Shopify Partner
3016 329 504
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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Santoe
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
suyash1
Shopify Partner
3016 329 504

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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Santoe
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
suyash1
Shopify Partner
3016 329 504

@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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Santoe
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
suyash1
Shopify Partner
3016 329 504

@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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly