distributing content accross columns

  • Donorbrain

    (@donorbrain)


    2 years, 10 months ago

    Hi there!

    I’m working on a website where i need to distribute the shop-names in alphabetical order and distribute them evenly. Some columns are very long and some very short… is there a way to distribute them evenly and have all of the columns the same height? So i guess some columns need to be cut in half but is there a way to ‘automate’ that without doing it manually?

    Password for viewing the page is: WORDPRESS2020

    Thanks!!!

    • This topic was modified 2 years, 10 months ago by Donorbrain.
    • This topic was modified 2 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Joy

    (@joyously)

    2 years, 10 months ago

    You might be interested in https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

    Thread Starter Donorbrain

    (@donorbrain)

    2 years, 10 months ago

    Thanks!!!
    i looked at this before but will this also work when i’m using a query to get all the shop-names?

    Joy

    (@joyously)

    2 years, 10 months ago

    The whole point of separating presentation (CSS) from form (HTML) is that your code can simply output the list and not worry about what column anything is in. The style handles the columns separately. There are several other ways in CSS to make columns, as well, such as inline-blocks, table-cell, float, flex, grid.

    Thread Starter Donorbrain

    (@donorbrain)

    2 years, 10 months ago

    Ok Thanks but how would i get this to work with this code? 

                $stores = '<div style="position: relative;"><div style="display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;">';
            foreach ($result as $item) {
               ;
                $city = get_post_meta($item->ID, 'wpsl_city', true);
                $char = $city;
                if ($char !== $lastChar) {
                    if ($lastChar !== '')
                        $stores .= '</div><br />';

                    $stores .= '<div class="vc_col-sm-3 winkelkolom"><h3>' . strtoupper($char) . '</h3><br />'; //print A / B / C etc
                    $lastChar = $char;
                }
                if ($slug = get_post_meta($item->ID, 'wpsl_slug', true)) {
                    $stores .= '<a href="/winkel/' . $slug . '">' . $item->post_title . '</a><br />';
                }
            }
    Joy

    (@joyously)

    2 years, 10 months ago

    I guess I don’t understand what you want. When I look at your page, I don’t see a problem. The cities are in alphabetical order, and obviously you can’t mix them with other cities, so some will have longer lists than others.

    Thread Starter Donorbrain

    (@donorbrain)

    2 years, 10 months ago

    and obviously you can’t mix them with other cities

    true.. but i don’t want to mix them. I want the starting letters (A, B, C, etc) to be mixed accross multiple columns instead of each letter having it’s own column. Just using the CSS trick with the column-count: 3; won’t do the trick. I need to edit the query i posted earlier but i don’t know how without breaking it. Anyone?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘distributing content accross columns’ is closed to new replies.