How to reduce font size of an entire list

  • Unknown's avatar
    musicdoc1 · Member ·

    I normally use the code
    <span style="font-size:small;">text, any number of lines in length</span>
    or “extra-small” to reduce the size of a line or paragraph of text. Today I discovered that specific sizes, e.g. “font-size:10px” may be substituted. However, I find that neither of these works on a list in a page or post on my WordPress.com site. In each attempt the code is ignored. Not stripped, just ignored.

    So how do I change the font size of all text in a list?

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi doc!

    First, span should only be used to change a section of text within a line or paragraph, never to change an entire paragraph. For that you instead add the inline styling to the p or div tag itself.

    For a list, add the style attribute to the list tag, in other words, the ol or ul tag, and it should be applied to the different items in the list.

    You’ll need to do this in WP-Admin, though – there’s a bug in the My Site editor that causes the list HTML elements to disappear if you add any attributes to it, so it won’t work trying to add the style attribute there. Once you’ve added and saved it in WP-Admin, it should be safe to continue using the My Site editor to continue editing the post, though.

  • Unknown's avatar
    musicdoc1 · Member ·

    Hey kokkieh!

    For a list, add the style attribute to the list tag, in other words, the ol or ul tag, and it should be applied to the different items in the list.

    Are you saying that a style attribute must be added not only to each opening ol or ul tag in a list, but also to each of the li tags in the list?

    Like so?

    <ul style="font-size:small;">
<li style="font-size:small;">list item 1</li>
<li style="font-size:small;">list item 2</li>
</ul>

    You’ll need to do this in WP-Admin, though…

    Okay, thanks. For me that’s fine, since I do virtually all work on the site in WP-Admin.

  • Unknown's avatar
    musicdoc1 · Member ·

    I have a recently published list with over thirty items in a three-tier hierarchy. That’s obviously going to be an tedious chore. Why wouldn’t there be a style attribute, or something else, that brackets everything and changes the font of the whole at one stroke?

  • supernovia · Staff ·

    If you can add CSS to the whole site, you can override it in one place.

    Otherwise, if your theme doesn’t have separate declarations for ul and li, this may work:

    <ul style="font-size:small;">
<li>list item 1</li>
<li>list item 2</li>
</ul>
  • Unknown's avatar
    musicdoc1 · Member ·

    @supernovia,

    @kokkieh    ,

    That last code worked perfectly. Thanks guys!

  • supernovia · Staff ·

    Cheers :)

  • The topic ‘How to reduce font size of an entire list’ is closed to new replies.