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

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_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
User photo
Mike Tansey

Hi, Michael.

A website of mine has this plugin, but it's got a problem in FF. The first testimonial loads perfectly, but then upon script execution, it switches to a gif loader and stays there. I don't think any of the CSS tricks here apply to this. Could you take a look? It's here http://firstmaid.co.uk

Thanks, Mike.

May 14, 2014, 16:58
User photo
Michael Cannon
Aihrus

I don't find anything off hand when looking. Did you run through https://aihrus.zendesk.com/entries/25119302-How-to-debug-common-issues?

May 14, 2014, 20:07
User photo
Mike Tansey

Hi, Michael.


Thanks for the quick response. I did run through the steps, but it's unaffected with other plugins disabled, etc. The plugin stops at the loader, see screenshot. Does it work for you?

 

Thanks.

May 15, 2014, 02:37
User photo
Michael Cannon
Aihrus

Mike, I see the swirl as well on OSX Firefox. I'm really not sure at this point. Could you please email an admin login to support@aihr.us and then summarize our writing as a support request?

May 15, 2014, 14:26
User photo
chris

Hi Michael, thanks for this great plugin! My theme includes built-in testimonial functionality, but I prefer yours.  But one issue is that I cannot remove the excess padding/margin on the left in the widget sidebar.  I used the knowledgeable info on this page to learn how to remove the left blockquote bar successfully, but there is still excess margin, and nothing I've tried has worked. A screenshot is attached to show what I mean. In the sidebar, your plugin is at top, and the theme's plugin is just under it.  The site is www.tiffanynesbitt.com.  What am I missing? Thanks!!

 

December 19, 2014, 17:34
User photo
Michael Cannon
Aihrus

Chris, could you please put a page up where i can debug the CSS myself? The screenshot doesn't give me the underlying code to figure out what's needed for you.

December 19, 2014, 19:35
User photo
chris

Hi, sorry... I left the site URL but not the specific page: http://www.tiffanynesbitt.com/about/

That's the page where the screenshot was taken. Thank you!

December 19, 2014, 19:39
User photo
Michael Cannon
Aihrus

It seems that you need to target the testimonials blockquote specifically for `padding-left`.

See Content clipped on the left side for a starting point. Currently, it's `1.5em`.

December 19, 2014, 21:56
User photo
chris

worked perfectly -- thank you Michael!!

December 20, 2014, 04:53