Quote image cut off

Every theme is different

Some themes don’t make the headings (<h1>, <h2>, etc.) very big so the quote image in the heading in the default template may appear cut off.

This image has an empty alt attribute; its file name is Strong-Testimonials-View-heading-image-clipped.png

To fix this, try this custom CSS to set the heading height to match the image.

.strong-view h3.testimonial-heading {
line-height: 29px;
}

FAQ

Q: Why can’t you just add this to the plugin to handle small headings by default?

Because it would adversely affect headings that are already at least that size. It would compact a heading that is 48px, for example. I have found most <h3>headings are at least 29px. I have not found a way to compensate for it in the template structure that doesn’t create other unwanted behavior.

Unfortunately, CSS does not have a min-line-height rule. When the world abandons Internet Explorer 8-9, we may be able to use Flexbox to solve this permanently.

Q: Where should I put custom CSS?

It depends.

If you’re using a free or premium theme, I recommend making a child theme. That CSS fix would simple go at the end of your stylesheet.

Child themes offer several advantages but require a little technical knowledge. There are plugins that create child themes but they are not foolproof, especially for some pro theme frameworks.

If you’d like to learn more about WordPress child themes, check out this great article from Kinsta.

Another good option is by using a plugin like Modular Custom CSS if you like to use the WordPress Customizer, or SiteOrigin CSS if you like to peek under the hood.

And obviously, if you’re building your own theme or custom testimonials template, that CSS fix would go in your stylesheet.

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Contact Support