Editing a Bulleted List?

[jaylethbridge]

Hi Folks,

Now, I know that I can add line heights to my paragraphs, BUT, problem is, I ONLY want to add line heights to my Bulleted Links Listings. I find the spaces to crammed and slightly unreadable as they are and if I add a return spacing between each one, then it looks too much. Hence why I need to just edit my bulleted lists and NOT the entire paragraphs.
See page in question below.
http://www.jaylethbridgephotography.co.uk/related-links.html

Hope you understand this posting.

Many thanks and regards, Jay

[jaylethbridge · Accepted solution]

@Adam

Got it. Sorted. As well as the line height, which I left in (don't know if I take that out that it still works), but added the padding and it worked as I intended it to look Thanks for your assistance on this one my friend. We got there

Regards, Jay

<style>
	li {
		line-height: 1.5em !important;
                padding: 5px;
	}
</style>

[Adam7]

That could be tweaked with a simple CSS change, @jaylethbridge. You could do it by changing the line-height specifically for the li tag, or by changing the padding for it. I don't recall if you were familiar with CSS or not, though I'm sure someone else could provide an easy solution.

[jaylethbridge]

@Adam

Hi Adam,
Yes, I am a little familiar with the basics of CSS (from many, many years ago LOL), but tried looking for an li tag to suit, but no luck I will have another look again (might of missed something), but don't believe it was there for the theme I am using.

Thanks and cheers for your assistance my friend.

Regards, Jay

[Adam7]

That's ok! You can also just override it by adding style codes to Settings > SEO > Header Code (only shows on the live site, though). Something along the lines of this:

<style>
	li {
		line-height: 1.5em !important;
	}
</style>

[jaylethbridge]

@Adam
Cheers my friend. I am off to give this a shot. Will be back to update, either way
Regards, Jay

[Adam7]

Good luck!

[jaylethbridge]

@Adam
OK, gave it a shot and it does it for "every single gap", BUT, I ONLY want it at the end of each bulleted link, if you know what I mean. Just enough to space it out a touch, but not too big a gap like a return space.

Regards, Jay

[jaylethbridge]

@Adam

OR, would it come under some sort of padding or line-spacing or similar?
Regards, Jay

[Adam7]

Hmm... I'm not sure which space you mean. The gap between each particular list item?

[jaylethbridge]

@Adam
Check out my link. The gap below "each link and description of websites".
Bottom of each now has a decent gap before the next bullet starts

http://www.jaylethbridgephotography.co.uk/related-links.html

[jaylethbridge · Accepted solution]

@Adam

Got it. Sorted. As well as the line height, which I left in (don't know if I take that out that it still works), but added the padding and it worked as I intended it to look Thanks for your assistance on this one my friend. We got there

Regards, Jay

<style>
	li {
		line-height: 1.5em !important;
                padding: 5px;
	}
</style>

[Adam7 · Accepted solution]

Awesome, glad to hear that!

[jaylethbridge]

@Adam

ARGH !!!! I found a problem.
Using that code also changes my navigation (left hand side) as well
NOW, I need to over ride that as well

[jaylethbridge]

@Adam

I think I am going to have to use a simple return spacing as I cannot figure a way around this one just yet
Regards, Jay

[Adam7]

With CSS it's possible to make it more specific to certain elements, so unlike right now where it applies to all list elements on the page, you can change it so it's only list items within a specific parent element.

https://www.w3schools.com/cssref/sel_element_gt.asp

I don't see the list on your page (for obvious reasons), although I'm sure you can do something like that so it only applies to list items in the content area of your site.