Turn Lists Into Columns With A Little CSS Magic

Published:

By: Drew McManus

In: Coding, Design & Development

One of the most common content management frustration points I find clients encounter is finding an attractive way to display long lists inside webpages. For example, the ubiquitous donor list.

Sure, a dozen or so names for larger donors in a bullet list looks fine but what about when you get to that $1-$99 range and you have hundred(s) of names? Fortunately, there’s a CSS trick that will let you convert regular bullet (unordered) or numbered (ordered) lists into columns without having to lift a finger.

Best of all, you can still manage list content on the backend as a regular bullet or numbered list.

Using The CSS

In order to get the most out of the CSS, you’ll need to implement it across two or more media queries.

Fancy Geek-Speak Jargon Alert: Media queries are the breakpoint in responsive design where content starts to shuffle, like breaking two columns of content on a desktop browser down to a single column on a mobile device.

And no worries, all of this is straightforward enough to use, even a CSS novice will be able to use it. Before you get started using the CSS, an overview to help understand what it’s doing:

  1. This media query is telling the system to only apply the following column settings to browsers with a width of 1025 pixels or more, which will be laptops and desktops.
  2. This media query is telling the system to only apply the following column settings to browsers with a width of no less than 768 pixels and no more than 1024 pixels. This covers most tablet size devices. Smartphone devices will likely wrap everything into a single column already but if your site doesn’t, you may need to add a third setting for max-width: 767px set to a column of “1.”
  3. This code is removing the default bullet point on unordered lists and removes the typical left indentation. Note, this code does not use the media query prefix which means it applies to every instance. Based on your site’s default style units, you may need to adjust the values to your liking and use px instead of em.
    1. This part of the code is optional: you can always keep the icons and indentation or remove one, but not the other.
  4. These sections are telling the system how many columns and how much of a gap between columns to use.

You can edit the number of columns and the gap size to whatever you want. For instance, if your list has items with longer character counts, you may want to use two or three columns instead of four on desktop widths. Or if they are all single words with few characters, you may want to go as high as six. Experiment and be creative.

Here’s the code in easy copy/paste format for bullet lists:

If you want to use this for numbered lists, just change ul to ol and /ol to /li.

Getting the CSS Into Your Website

If you’re a WordPress user, it’s very straightforward. All you need to do is go to Appearances > Customizer > Additional CSS then paste the code. Here’s everything you need to know about using the CSS editor via the official WordPress documentation site.

If you use a publishing platform other than WordPress, you’ll need to check with that platform’s documentation for the prescribed method, but here are some links to Custom CSS documentation at popular platforms:

Applying To Single Pages

Odds are, you don’t want this CSS to apply to every list on your site. To that end, you have a few options for limiting it to a single page.

Use A Page Specific CSS Selector

You can use additional selectors that tell the system to apply the CSS to specific pages. In WordPress, pages and posts have unique ID values, which you can find using something like Google Chrome’s Inspect Element tool. For example, most pages and posts have a selector along the lines of #post-[unique numerical value], so your CSS may start off like #post-2779 .site-content ul.

While that works just fine, it can be easy to forget about page/post specific CSS in the customizer, which is why I recommend using something like the following plugin that adds the ability to add CSS inside each page/post admin panel.

Plugin Solution

If you’re a WordPress user, download and install the Simple CSS plugin by Tom Usborne. It will add a new custom CSS metabox to your page, post, and custom post type admin panels you can use to enter CSS that will only be applied to that page/post.

Tom is a superb programmer and produces some of the best functionality WordPress plugins and themes on the market. Simple CSS is free to use and available in the WordPress repository.

Drew McManus
Author
Drew McManus
In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower. With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists. For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.
Author Archive

Leave a Comment