Bulleted List Paragraph Formating

[HDTV-Entertainment]

I have set up font and size formatting for typography at the site using the Google Font Manger.
I find that using a list (bullets) has the individudal lines right on top of each other. Is there any way to control the bulleted list line spacing between bullets using CSS? Where and how please.

Thank you.

[Bill Robbins]

You can. Here what to do:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   li {
   	line-height: 1;
   	margin-bottom: 10px;
   }
   

   The line-height 1; sets the line height to be equal to the font size. It’s a multiplier so you could increase it by making it 1.1 for example. The margin-bottom: 10px; adds 10 pixels of margin below each line item. Feel free to adjust and/or remove any of those.

4. Save your changes.

Hope that helps out,
Bill

[Bill Robbins]

You can get a bit more specific with what is targeted. Give this a try:

.site-content li{
    	line-height: 1.2 ;
   	 margin-bottom: 20px;
	}

Enjoy your weekend,
Bill

[Bill Robbins]

Navigation widget only:

.widget_nav_menu li {
	line-height: 1.2 ;
	margin-bottom: 20px;
}

You could add a font family to your sidebar widgets like this:

#sidebar .widget {
	font-family: 'Georgia';
}

It’ll target all widgets.

[Author]

Posts