Make Stars Larger in Testimonials Widget

Hello,

How can I make the stars larger in the testimonials widget? See screenshot attached. I increased the size of the text, but the stars remain the same size.

Attachments:

You must be logged in to view attached files.

Hello,

You can make the rating stars larger by pasting the below css in Theme Setting >> CUSTOM CSS >> Global Custom CSS:

.star-rating span:before {
 font-size:24px;
}
.star-rating {
font-size:24px;
}

By increasing the font-size rating stars size will also increase.

But it disturbs the ratio of ratings. As the rating stars ratio is calculated with some backend functions and then we are able to see how much rating is given by a person as they filled with yellow color.

It requires customization to change the functionality and formula of calculation of those functions which are responsible for increasing the width of stars and this is beyond our limitations and support policy.

Best Regards.

Ah I see what you’re saying. Are there any alternatives?

Another option: How can I add more space between the star rating and the actual text of the review/testimonial? Perhaps by increasing the space, it will look a bit better on the page.

Hello,

Sorry, but there is no other way to increase the size of rating stars.

You can increase the spacing of stars but it also disturbs the ratings ratio. because width plays an important role and generated by a some of the backend functions. So when we increase the inner spacing the width increased. In case if you still want to increase the spacing between the rating stars. Please insert the below css in Theme Settings >> CUSTOM CSS >> Global Custom CSS:

.star-rating span:before {
letter-spacing: 8px;
}
.star-rating {
letter-spacing: 8px;
}

Screenshot: https://jmp.sh/A0KHNab
Result: https://jmp.sh/T142HEW

To increase the word spacing of the reviews/testimonials. First edit your main page with Wp-Bakery page builder and then you need to assign a custom class to the testimonial element as in the screenshot I used “wordSpacing” class.
https://jmp.sh/tDbYQ2X

Then click on the setting icon of Wp-Bakery page builder and paste the below custom css code:

.wordSpacing{
    word-spacing:2em;
}

You can increase or decrease the word spacing from 2 em. I just used 2 em to set an example for you.

Screenshot: https://jmp.sh/RAsrryI
Result: https://jmp.sh/IZNPNjc

Best Regards.

Oh wow! Thank you for all of that information. Very useful!

Hello,

Well, Cris, it’s been great chatting with you! I hope I resolved your issues thoroughly. Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day :-)

Topic Closed.
Best Regards.

[Author]

Posts