How to Debug and Correct CSS Issues in Your Browser

Steps to Debugging CSS

Common Issues and Fixes

Clipped Content and Credits

There's not a cureall CSS fix for this as it's usually dependent upon your theme. However, these CSS tweaks should get you going in the correct direction.

Content clipped on the left side

.testimonials-widget-testimonial blockquote {
	padding-left: 6px;
}


Credit clipped on right side

.testimonials-widget-testimonial cite,
.testimonials-widget-testimonial div.credit {
	padding-right: 3px;
}


Increase spacing between testimonials


.testimonials-widget-testimonial.list,
.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;
}