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_spacing.png

.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

overlapping_control_box.png

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

Remove Blockquote Left Border

blockquote_border_left.png

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

Overly wide blockquote troubles

Using Inspect Element to see `blockquote` properties

wide_blockquote.png

Inline testing the change

blockquote_width.png

CSS that probably fixes the width issue

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

Vertical Review Stars

vertical_stars.png

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.

star_CSS.png

CSS that probably fixes the vertical ratings issue

.ratings img {
	display: inline;
}

Read More Link Color

CSS for changing read more link color

a.more-link.png

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

Comments

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
Aihrus

@Carle Robbins got URL?

February 24, 2014 22:34