[Resolved] Display List of Custom Taxonomy Terms in Responsive Columns using Semantic Grid

[Max]

Hello Tom

I hope you and your family are doing well.

I have a curly one for you today.

I have written some php and css.

I am using it to display a list of term links from a custom taxonomy. It works nicely to create a long list. I have added some simple css to style the layout and links.

What I want to do however, is to format the PHP so that the resulting list is displayed in 3 responsive columns using GP’s semantic grid-33 divs.

How can I code this?

Here are some articles I found where people using other themes have created their taxonomy term list in columns:

Taxonomy List
Multiple Columns

PHP
The echo section of my php is as follows:

echo "<h1 class='vendor-title'>MY TITLE</h1>"; 
        echo "<p class='vendor-subtext'>My subtext.</p>";
   		echo "<ul class='vendor-list'>";
		foreach ( $terms as $term ) {
			echo '<li><a href="' . get_term_link( $term ) .'">' . $term->name . '</a></li>';
		}
		echo "</ul>";

CSS

.vendor-title {
    margin-top:75px;
}

.vendor-subtext {
    font-weight:600;
} 

.vendor-list {
    font-size:14px;
    list-style-type: none;
  
}

.vendor-list a:hover {
   color:blue;
}

Thanks in advance for your valuable assistance.

Kind Regards

Max

[Tom]

Hey Max,

Perhaps something like this will help?: https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns

Let me know 🙂

[Max]

I just found another stack post with some interesting css:

`ul {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}`

Dropped it in under my vendor list class and it worked just fine.

So rather than relying on the grid. It is perhaps a lot easier to just use media break points.

For example:

phone no columns
tablet 2 columns
pc 3 columns.

What do you think?

Not really a responsive solution but quick easy and seems to work.

I added -ms-column gap and count also because my cpanel editor was showing yellow exclamation warning triangle.

Is the above css supported by all browsers now days??

[Tom]

That’s how I’d do it. You can check browser compatibility here: https://caniuse.com/#search=column-count

[Max]

Just to confirm.

This works nicely.

Just change the column count and gap for each of your media break points.

[Tom]

Awesome 🙂

[Author]

Posts