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.
  • 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;
}

 

Have more questions? Submit a request

Comments

Powered by Zendesk