Home>Support>How to Narrow Line Spacing in a Hero Widget

How to Narrow Line Spacing in a Hero Widget

Hello,

I built out a Hero widget but needed the space between the text lines to be narrower, so this is what an example slide looks like right now:

PRODUCTIVE LEADERSHIP
What does it mean to be a productive leader? Nourishing your community
through leadership produces fruit that can be felt by others, but being a
true leader means nourishing your roots inward to hone your character into
a truly productive leader. We are influenced on a daily basis by those around
us, especially by those in positions of leadership.

This looks great on desktop, but for mobile versions, each line above wraps around into two lines. The space between each of those two lines is huge. How do I fix this problem?

Thanks.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 months, 24 days ago Andrew Misplon Hi, I Work Here

    Hi

    Thanks for reaching out.

    Do you have a public URL where we can take a look at what’s going on?

  2. 4 months, 22 days ago ageresdifficiles

    Yes, the Hero widget is the second Hero widget on the home page: alfonsejaved.com.

    Thanks.

  3. 4 months, 22 days ago Andrew Misplon Hi, I Work Here

    Thanks for the link.

    Text is overlapping in the Existence frame due to the line-height set in each paragraph. When editing the frame, click on the Text tab. Line height is being manually set as an inline style. Try to set a line height that works for desktop and mobile. Consider not using a percentage based line-height, that’s the issue on mobile.

    There isn’t a setting to target the paragraph bottom margin within the Hero. If you want to do that you can edit the Attributes section within the Hero. Add a class name without the period. At AppearanceCustom CSS or the Custom CSS Location of your choosing you can target paragraphs within the class name. For example

    hero-paragraphs
    .hero-paragraphs p { margin-bottom: 5px !important; }

    We aren’t able to assist much with Custom CSS within our free support scope. Hopefully, the above gets you started.

    More info at:

    Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes

  4. 4 months, 21 days ago ageresdifficiles

    Hi Andrew,

    Thanks so much. I set the line height differently and set it all to a heading (h6) in order for the fittext to apply to it.

    However, I would like to make h6 normal (not bold) for the hero widget.

    I entered this under Appearance -> Custom CSS, but it’s not working. Are you able to tell me what I need to adjust for this:

    /* hero-paragraphs */

    .hero-paragraphs h6 {
    font-style: normal;
    }

    Thanks so much.

  5. 4 months, 21 days ago Andrew Misplon Hi, I Work Here

    Glad to hear you’re making progress. Try setting font-weight.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More