[Resolved] How to divide content evenly over 3 columns?

Home Forums Support [Resolved] How to divide content evenly over 3 columns?

Home Forums Support How to divide content evenly over 3 columns?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2045566
    Anneloes

    Hi!

    I just bought GeneratePress and love the theme so far.

    I have a long list in a (draft) blog article that I want to split up in 3 columns, but I can’t get the list to divide the content evenly over the 3 columns. I prefer not doing it manually as I’ll have to update the list regularly. Is there a way to spread content equally over 3 columns?

    Kind regards!

    #2045678
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the page where i can see the ‘list’ ?

    #2045686
    Anneloes

    Hi David,

    Not yet, my blog isn’t finished yet. But it’s just a simple blog post with a regular unordered list with around 45 items.

    So like:

    • Item
    • Item
    • Item
    • Item
    • Item
    • Etc

    I want to distribute that evenly over 3 columns because otherwise it takes up a lot of space in my blog post, but I don’t want to do it ‘manually’ (e.g. dividing the 45 items by 3) because it’s harder to maintain.

    #2045901
    David
    Staff
    Customer Support

    Select the List Block, in Advanced > Additional CSS Class(es) add: list-column-3.

    Then add this CSS to your site:

    .list-column-3 {
        column-count: 3;
    }
    
    /* Change number of columns on smaller devices */
    @media(max-width: 768px) {
        .list-column-3 {
            column-count: 1;
        }
    }
    #2045957
    Anneloes

    Hi David,

    This worked great, thank you so much! Have a great week 🙂

    #2046285
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.