Knowledge Base/Testimonials Widget/Frequently Asked Questions

How to Debug and Correct CSS Issues in Your Browser

Michael Cannon
posted this on July 20, 2013 02:13

Steps to Debugging CSS

Common Issues and Fixes

Increase spacing between testimonials


.testimonials-widget-testimonial.single {
	margin-bottom: 4em;

Remove the blockquotes left border

.testimonials-widget-testimonial blockquote {
	border-left: none;

Prevent weird word wrap issues with image for narrow width displays

.testimonials-widget-testimonial .image {
	float: none;

Remove Overlapping Controls


.bx-controls {
  margin-bottom: 2em;

Remove Blockquote Left Border


.testimonials-widget-testimonial blockquote {
  border-left: none;

Overly wide blockquote troubles

Using Inspect Element to see `blockquote` properties


Inline testing the change


CSS that probably fixes the width issue

.testimonials-widget-testimonial blockquote {
	width: initial;

Vertical Review Stars


The most common issue is that a theme has CSS which overrides Testimonials own that sets `display: inline;`. You just need to target the vertical stars and apply `display: inline;` like the following default.


CSS that probably fixes the vertical ratings issue

.ratings img {
	display: inline;

Read More Link Color

CSS for changing read more link color


.testimonials-widget-testimonial a.more-link {
	color: red;


User photo
Kim Blue

Thanks again for taking the time to create a video. Really helpful! 

November 11, 2013 22:00
User photo
Carle Robbins
I can't seem to get this to work:

.testimonials-widget-testimonial blockquote { width: initial; }
February 24, 2014 11:51
User photo
Michael Cannon

@Carle Robbins got URL?

February 24, 2014 22:34