quote image cut off in default template

  • Plugin Contributor Chris Dillon

    (@cdillon27)


    8 years, 10 months ago

    If the quote image in the heading in the default template appears cut off like in this screenshot, try this custom CSS:

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

    Some themes don’t make the headings (h1, h2, etc.) very big and that code sets the heading height to match the image. You can increase that size if you want.

    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. Since most <h3> headings are at least 29px, it will remain a quick fix like this.

    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 your stylesheet.

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

    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.

    https://www.ads-software.com/plugins/strong-testimonials/

  • The topic ‘quote image cut off in default template’ is closed to new replies.