Streaming live at 10am (PST)

Space between Text


#1

Hi, I have text here but I’d like for text lines that are a part of the same bullet point to have less height between them than separate bullet points. How can I do this?

I’d also like to add an icon to each point instead of bullet points.

This is on the “Services” page.


https://preview.webflow.com/preview/blog-1-324f36?utm_source=blog-1-324f36&preview=eb5ad576e3e11f04021f19204b042860


#2

Hi @Ashley_Janelle,
Easiest fix is to adjust your line-height (it’s 20px now). Decrease your line-height to e.g. 12px (or you can use 1.2em) and just add some break lines (ENTER) in between.

If you prefer to manipulate the exact space between your bullet point items, then you have set all bullet point items in it’s own element. You can then either add margin in this element. Of course still have to adjust your line-height.

Hope it helps.

Have fun :slight_smile:


#3

Thanks for the info. How would I make each bullet point its own element?


#4

First duplicate the class of the current text block element (not sure if you are using this class somewhere else in your site), then just copy and paste this text block element a couple of times. Then you have all bullet points multiple times, simply remove the text one by one, so you have the bullet points divided in the multiple elements.

(Hope my explanation makes sense)


#5

I’ve added two screenshots to make my explanation a little more visual.

The first is to show the copied Text Block elements with class name “Text Block 22”:

The second to show you the adjusted line-height. Just add some margin or padding to the “Text Block 22” class, and you can increase the space between these items:

Have fun!


#6

thanks for the screenshots but for some reason I’m not following… do you mind doing a video of how I would do this?


#7

Hope this screen capture video helps: