Support » Plugin: A-Z Listing » Customize length of columns

  • Resolved marcus1108

    (@marcus1108)


    Hi there,
    any chance to modify the length of the columns. I need a bit longer columns otherwise it looks like not that nice?

    thx and kr
    Marcus

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

    (@diddledan)

    Hi,

    To do this, currently, you need to add some custom CSS to override the in-built styles. The following is the CSS as shipped with the plugin, which will require changing the max-width of each entry, and the column-width in the first entry:

    .letter-section ul.columns {
        column-gap: 0.6em; /* the gutter size between columns */
        column-width: 15em;
    }
    .letter-section ul.columns.max-0-columns, .letter-section ul.columns.max-1-columns {
        max-width: 15.6em; } /* (1 x width) + gap - there is one gutter */
    .letter-section ul.columns.max-2-columns {
        max-width: 30.6em; } /* (2 x width) + gap - there is one gutter */
    .letter-section ul.columns.max-3-columns {
        max-width: 46.2em; } /* (3 x width) + (gap x 2) - there are two gutters */
    .letter-section ul.columns.max-4-columns {
        max-width: 61.8em; } /* (4 x width) + (gap x 3) - there are three gutters */
    .letter-section ul.columns.max-5-columns {
        max-width: 77.4em; } /* (5 x width) + (gap x 4) */
    .letter-section ul.columns.max-6-columns {
        max-width: 93em; } /* (6 x width) + (gap x 5) */
    .letter-section ul.columns.max-7-columns {
        max-width: 108.6em; } /* (7 x width) + (gap x 6) */
    .letter-section ul.columns.max-8-columns {
        max-width: 124.2em; } /* (8 x width) + (gap x 7) */
    .letter-section ul.columns.max-9-columns {
        max-width: 139.8em; } /* (9 x width) + (gap x 8) */
    .letter-section ul.columns.max-10-columns {
        max-width: 155.4em; } /* (10 x width) + (gap x 9) */
    .letter-section ul.columns.max-11-columns {
        max-width: 171em; } /* (11 x width) + (gap x 10) */
    .letter-section ul.columns.max-12-columns {
        max-width: 186.6em; } /* (12 x width) + (gap x 11) */
    .letter-section ul.columns.max-13-columns {
        max-width: 202.2em; } /* (13 x width) + (gap x 12) */
    .letter-section ul.columns.max-14-columns {
        max-width: 217.8em; } /* (14 x width) + (gap x 13) */
    .letter-section ul.columns.max-15-columns {
        max-width: 233.4em; } /* (15 x width) + (gap x 14) */

    You can add this CSS override using the Theme Customizer by navigating to wp-admin -> Appearance -> Customize

    marcus1108

    (@marcus1108)

    Tks a ton, worked for me 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize length of columns’ is closed to new replies.