How to Debug and Correct CSS Issues in Your Browser
Steps to Debugging CSS
- Were you upgrading?
From Testimonials before version 2.10.0, then your CSS probably needs updating. Please review Major Changes Since 2.10.0 for the changes.
From Testimonials before version 2.15.0, then your CSS or options probably needs updating. Please review Major Change for 2.15.0 for the changes.
- 99% of the time, it's your theme causing your CSS headaches.
- You'll need to target your testimonials CSS customizations with a prefix like `.testimonials-widget-testimonial`
- Watch How to Correct Testimonials Widget CSS Issues to learn how to use your browser's Inspect Element tool.
- Inspect Element for Chrome and Firefox
- Inspect Element for Internet Explorer
- You can get the Developer Toolbar by pressing F12, and then Ctrl+B (or click the pointer) to inspect an element
- Also read A Peek at Internet Explorer’s Developer Tools
- Inspect Element for Safari
- Normally, put your CSS revisions into your child theme's `style.css` file.
- Don't edit `testimonials-widget.css` or any other plugin CSS files. You'll lose those changes during plugin updates.
- If your shortcode entries look like `code` or typewriter text, remove the `<code>` tags from around the shortcode.
- Also make sure that your content itself isn't surrounded by `<code>` or `<pre>` tags.
- Make sure to clear your website and browser cache to ensure the latest CSS files are downloaded.
- If you need to disable the built-in CSS for Testimonials by Axelerant, then put
wp_deregister_style( 'Testimonials_Widget' );
into your theme's `functions.php` file.
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; }
Related articles