Issue with bulleted/numbered list font size

[bartenderonduty]

Hey Themeco Team,

I’m trying to style my ul li using CSS but for some reason they’re rendering larger than the p fonts. Here’s the CSS I’m using:

ul, li {
font-family: Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 300;
font-size: 1.25em !important;
line-height: 1.75!important;
}
p, .p {
font-family: "Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 300;
font-size: 1.25em !important;
line-height: 1.75 !important;
}

Can you suggest a way to make the bulleted/numbered lists the same size as the paragraph fonts?

Thank you!

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

Your css is partially correct. Update it to this:

ul, li, li p, li .p,
p, .p {
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 1.25em !important;
	line-height: 1.75!important;
}

If still this does not work, To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers.

[bartenderonduty]

Thank you for the quick reply. Unfortunately, that CSS didn’t appear to work.

[friech]

Hi @bartenderonduty,

That is happening because you have the 1.25em applied on both <ul> and <li>.

Please update the selector from ul, li, li p, li .p, p, .p
to ul li, p

Actually you should have not resorted to custom CSS because the text element provides you the text formating and text styling options and that includes the list <ul><li> inside

And if you need to stying the list uniquely, you can add a class to your <ul> tag

<ul class="my-list">
<li>Average number of daily visits</li>
<li>Total number of impressions</li>
<li>Average duration of visitor stay</li>
<li>Average distance traveled</li>
<li>Number of nearby devices</li>
<li>Number of first-time customers</li>
<li>Number of returning customers</li>
</ul>

And then use that class to style the list.

e.g.

.my-list li {
	font-family: ;
	font-size: ;
	font-weight: ;
	line-height: ;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[bartenderonduty]

This is a BIG help. Thank you very much for your assistance!

[rad]

You’re most welcome!