How to change font size on shopify review app?

[E-V-O]

I am using debut theme, would like to increase the size of the text in the reviews, it's too small. Thank you.

[KetanKumar]

Hello, @E-V-O 

Please share your site URL,
So I will check and provide a solution here.

[KetanKumar]

Thanks for Details 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

.spr-review-content-body {
    font-size: 15px;
}
.spr-review-reply-body, .spr-review-reply-shop  {
    font-size: 15px;
}

[E-V-O]

Thank you, unfortunately it made no difference. Any other idea?

[KetanKumar · Accepted solution]

can you please try this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

.spr-review-content-body {
    font-size: 15px !important;
}
.spr-review-reply-body, .spr-review-reply-shop  {
    font-size: 15px !important;
}

[E-V-O]

Awesome, bumped it to 17px, perfect now! Thanks so much, appreciate it!

[kenyamuro]

Hi can someone help me change the size of the title on my product reviews please?

[KetanKumar]

HEllo, @kenyamuro 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[kenyamuro]

Hi thanks so much for replying this is the preview of the theme am talking
about.

https://r0zua1acpo71h4wr-12640529.shopifypreview.com

thanks so much

[KetanKumar]

@kenyamuro 

Thanks 

sorry, but i can see any  review app can you please show me

[kenyamuro]

Yes of course.

[kenyamuro]

here you go

[KetanKumar]

@kenyamuro 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.scss.css->paste below code at the bottom of the file.

.spr-header-title {
font-size: 18px !important;
}
.spr-review-content-body {
    font-size: 15px !important;
}
.spr-review-reply-body, .spr-review-reply-shop  {
    font-size: 15px !important;
}

[kenyamuro]

OMG thanks so so much! You're the best!

[KetanKumar]

@kenyamuro 

Thanks for update and your support.

[colourfulthings]

Hi,  The font size on my product reviews is very small.  Can I paste the same code as was posted back in 2020?

[KetanKumar]

@colourfulthings 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Carmen-Logics]

Hi,

I have the same question as @colourfulthings. I am using the Supply theme.

Thanks!

Carmen

[KetanKumar]

@Carmen-Logics 

can you please share store url?

[Carmen-Logics]

Sure thing! It's store.logicsacademy.com Thanks, @KetanKumar 

Forgot to add that right now it's at the bottom of the page. I want to put it on top of it once I can reduce the font size so it doesn't compete with the name

[KetanKumar]

@Carmen-Logics 

can you please provide image and mark which font size do you need reduce

[Carmen-Logics]

@KetanKumar here it is:

[KetanKumar]

@Carmen-Logics 

thanks for more clear please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-product-reviews .spr-header-title {
    font-size: 18px; /* change value as you like */
}

[Carmen-Logics]

Works like a charm! Thank you @KetanKumar !!

[KetanKumar]

@Carmen-Logics 

it's my pleasure to help us

[TeaChestHI-BD]

Thank you for the solutions for the title header and review body & reply content. What about the review's author and date, what is the CSS class for that line?

Mahalo in advance,

Ben

Link to example page: https://teachest.com/products/olena-tea-bags

Scroll down to the Customer Reviews section. First post: "Brian on Jun 01, 2021". That is what I would like to enlarge. Also the 'Report As Inappropriate' link.

[TeaChestHI-BD]

@KetanKumar - Never mind, I figured it out. I used the 'Inspect' feature of Developer Tools in Firefox to find the CSS classes.

Here is my code for the Header Byline and Report as Inappropriate link:

.spr-review-header-byline {
  font-size: 94% !important;
}

.spr-review-reportreview {
  font-size: 98% !important
}

As for the rest of the content in my Customer Reviews:

.spr-review-header-title {
  font-size: 108% !important;
}

.spr-review-content-body {
    font-size: 98% !important;
  	line-height: 150% !important;
}
.spr-review-reply-body, .spr-review-reply-shop  {
    font-size: 98% !important;
  	line-height: 150% !important;
}

 I tend to use percentages for mobile compatibility. Hope this helps other users. Thanks again @KetanKumar ! BTW, the difference in class names might be due to my theme by the developer, Out of The Sandbox.

[KetanKumar]

@TeaChestHI-BD 

Wow, it would be great.

thanks for update

[TeaChestHI-BD]

@KetanKumar 

You're welcome!

But wait… there's more!

Edit the Write a Review form

h3.spr-form-title {
  font-size: 116% !important;
}

.spr-form-label {
  font-size: 103% !important;
}

input.spr-form-input-text, input.spr-form-input-email {
  width: 45% !important;
  font-size: 96% !important;
}

textarea.spr-form-input-textarea {
  font-size: 96% !important;
}

Change the color of the rating stars

.spr-badge-starrating, .spr-review-header-starratings, .spr-summary-starrating {
  color: #DCB232;
}

Change values to suit your site. Enjoy. Aloha!