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.
Hi
Thanks for reaching out.
Do you have a public URL where we can take a look at what’s going on?
Yes, the Hero widget is the second Hero widget on the home page: alfonsejaved.com.
Thanks.
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 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
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.
Glad to hear you’re making progress. Try setting font-weight.