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

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

Home Forums Support Display List of Custom Taxonomy Terms in Responsive Columns using Semantic Grid

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #602651
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #602914
    Tom
    Lead Developer
    Lead Developer
    #602930
    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??

    #603138
    Tom
    Lead Developer
    Lead Developer

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

    #603805
    Max

    Just to confirm.

    This works nicely.

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

    #604049
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.