Support » Plugin: A-Z Listing » Display only 2 columns

  • Resolved lklawless

    (@lklawless)


    Thanks for the great plugin!

    My posts have long titles, so I’d like to show them in just two columns instead of three – is this possible?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Daniel Llewellyn

    (@diddledan)

    Hi,

    The CSS that determines the columns can be overridden. I use a pre-processor to generate them but the final output is as follows:

    .letter-section ul.columns {
        column-gap: 0.6em;
        column-width: 15em;
    }
    .letter-section ul.columns.max-0-columns,
    .letter-section ul.columns.max-1-columns {
          column-count: 1;
          max-width: 15.6em;
    }
    .letter-section ul.columns.max-2-columns {
          column-count: 2;
          max-width: 30.6em;
    }
    .letter-section ul.columns.max-3-columns {
          column-count: 3;
          max-width: 46.2em;
    }
    .letter-section ul.columns.max-4-columns {
          column-count: 4;
          max-width: 61.8em;
    }
    .letter-section ul.columns.max-5-columns {
          column-count: 5;
          max-width: 77.4em;
    }
    .letter-section ul.columns.max-6-columns {
          column-count: 6;
          max-width: 93em;
    }
    .letter-section ul.columns.max-7-columns {
          column-count: 7;
          max-width: 108.6em;
    }
    .letter-section ul.columns.max-8-columns {
          column-count: 8;
          max-width: 124.2em;
    }
    .letter-section ul.columns.max-9-columns {
          column-count: 9;
          max-width: 139.8em;
    }
    .letter-section ul.columns.max-10-columns {
          column-count: 10;
          max-width: 155.4em;
    }
    .letter-section ul.columns.max-11-columns {
          column-count: 11;
          max-width: 171em;
    }
    .letter-section ul.columns.max-12-columns {
          column-count: 12;
          max-width: 186.6em;
    }
    .letter-section ul.columns.max-13-columns {
          column-count: 13;
          max-width: 202.2em;
    }
    .letter-section ul.columns.max-14-columns {
          column-count: 14;
          max-width: 217.8em;
    }
    .letter-section ul.columns.max-15-columns {
          column-count: 15;
          max-width: 233.4em;
    }

    Hopefully, it should be clear that the column width is determined by column-width in the first selector. The rest of the rules are about limiting the number of columns so that there are always several items in each column before adding another column. This prevents situations where you have 5 columns each with a single item within. Instead, you’ll get a single column with 5 items rather than 5 columns with 1 item.

    The max-width in the max-x-columns selectors is the number of columns multiplied by the column width and then 0.6em added to account for the column-gap.

    If you use SCSS as a preprocessor you can generate the rules with:

    .letter-section ul.columns {
        column-gap: 0.6em;
        column-width: 15em;
    
        &.max-0-columns,
        &.max-1-columns {
            column-count: 1;
            max-width: 15.6em;
        }
        @for $column from 2 to 16 {
            &.max-#{$column}-columns {
                column-count: $column;
                max-width: ($column * 15em) + (($column - 1) * 0.6em);
            }
        }
    }

    Thanks so much for responding, but this didn’t answer my question. I want to force it to limit to just two columns maximum. I tried increasing the max width for columns 1 and 2 but that had no effect.

    The problem is that I have long titles wrapping, even when there’s only one column, which doesn’t look good.

    Black Bean and Sun-Dried Tomato
    Dip
    Black Bean Burgers

    White Bean and Black Olive
    Salad
    White Bean and Tomato Soup

    I know that you designed your plugin to work in a very specific way, I’m just hoping to be able to tweak it a bit to fit my site. 🙂

    Plugin Author Daniel Llewellyn

    (@diddledan)

    Hi,

    You need to modify both the column-width in the top selector and the max-width in each of the max-x-columns selectors. If you want to ensure that you never have more than two columns, then once you’ve set the column-width you can set all the selectors for max-x-columns where x is greater than 2 to have the same max-width setting.

    For example, if you want to have columns 25em wide instead of the default 15em and restrict to only ever showing 2 columns, you can add the following CSS:

    .letter-section ul.columns {
        column-gap: 0.6em;
        column-width: 25em;
    }
    .letter-section ul.columns.max-0-columns,
    .letter-section ul.columns.max-1-columns {
          column-count: 1;
          max-width: 25.6em;
    }
    .letter-section ul.columns.max-2-columns,
    .letter-section ul.columns.max-3-columns,
    .letter-section ul.columns.max-4-columns,
    .letter-section ul.columns.max-5-columns,
    .letter-section ul.columns.max-6-columns,
    .letter-section ul.columns.max-7-columns,
    .letter-section ul.columns.max-8-columns,
    .letter-section ul.columns.max-9-columns,
    .letter-section ul.columns.max-10-columns,
    .letter-section ul.columns.max-11-columns,
    .letter-section ul.columns.max-12-columns,
    .letter-section ul.columns.max-13-columns,
    .letter-section ul.columns.max-14-columns,
    .letter-section ul.columns.max-15-columns {
          column-count: 2;
          max-width: 50.6em;
    }
    Plugin Author Daniel Llewellyn

    (@diddledan)

    Alternatively you could try CSS like:

    .letter-section ul.columns {
        column-gap: 0.6em;
        column-width: initial;
    }
    .letter-section ul.columns.max-0-columns,
    .letter-section ul.columns.max-1-columns {
          column-count: 1;
          max-width: initial;
    }
    .letter-section ul.columns.max-2-columns,
    .letter-section ul.columns.max-3-columns,
    .letter-section ul.columns.max-4-columns,
    .letter-section ul.columns.max-5-columns,
    .letter-section ul.columns.max-6-columns,
    .letter-section ul.columns.max-7-columns,
    .letter-section ul.columns.max-8-columns,
    .letter-section ul.columns.max-9-columns,
    .letter-section ul.columns.max-10-columns,
    .letter-section ul.columns.max-11-columns,
    .letter-section ul.columns.max-12-columns,
    .letter-section ul.columns.max-13-columns,
    .letter-section ul.columns.max-14-columns,
    .letter-section ul.columns.max-15-columns {
          column-count: 2;
          max-width: initial;
    }

    The downside to this method is when you only have one column for a letter the list will be full-width, which can lead to visual inconsistencies with any other letters that have two columns.

    I don’t get it, I can’t get either of these to work – I’ve changed the width all the way up to 400 / 800 and tried the alternate solution, nothing changes. I’ve replaced the default code in a-z-listing-default.css and have tried adding it to a-z-listing-customize.css but the page always still has three columns.

    Thank you so much for trying to help but I guess this just isn’t going to work for me.

    Plugin Author Daniel Llewellyn

    (@diddledan)

    Would it be ok for you to share the link to your site so that I may take a look to see if I can see why it’s not working with the changed CSS?

    Plugin Author Daniel Llewellyn

    (@diddledan)

    It looks like your CSS is being cached to a CDN. If you can somehow flush that cache you should then see the changes. I suspect the CDN isn’t recognising that you have modified the CSS files directly.

    Yes, that did it – sorry I didn’t think of it. Thanks so much for your help. 🙂

    Plugin Author Daniel Llewellyn

    (@diddledan)

    Awesome. I’m glad we figured it out together 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.