Title: Display only 2 columns Last modified: March 11, 2019 --- # Display only 2 columns * Resolved [lklawless](https://wordpress.org/support/users/lklawless/) * (@lklawless) * [7 years, 2 months ago](https://wordpress.org/support/topic/display-only-2-columns/) * 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 [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357297) * 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](https://sass-lang.com) 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); } } } ``` * Thread Starter [lklawless](https://wordpress.org/support/users/lklawless/) * (@lklawless) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357380) * 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 [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357425) * 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 [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357451) * 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. * Thread Starter [lklawless](https://wordpress.org/support/users/lklawless/) * (@lklawless) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357856) * 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 [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357868) * 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? * Thread Starter [lklawless](https://wordpress.org/support/users/lklawless/) * (@lklawless) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357944) * Sure, thank you: [https://www.theveggietable.com/blog/vegetarianism/recipes-a-to-z/](https://www.theveggietable.com/blog/vegetarianism/recipes-a-to-z/) * Plugin Author [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11357959) * 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. * Thread Starter [lklawless](https://wordpress.org/support/users/lklawless/) * (@lklawless) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11358091) * Yes, that did it – sorry I didn’t think of it. Thanks so much for your help. 🙂 * Plugin Author [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * (@diddledani) * [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11358098) * Awesome. I’m glad we figured it out together 🙂 Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Display only 2 columns’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/a-z-listing_d8edfd.svg) * [A-Z Listing](https://wordpress.org/plugins/a-z-listing/) * [Frequently Asked Questions](https://wordpress.org/plugins/a-z-listing/#faq) * [Support Threads](https://wordpress.org/support/plugin/a-z-listing/) * [Active Topics](https://wordpress.org/support/plugin/a-z-listing/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/a-z-listing/unresolved/) * [Reviews](https://wordpress.org/support/plugin/a-z-listing/reviews/) * 10 replies * 2 participants * Last reply from: [Dani Llewellyn](https://wordpress.org/support/users/diddledani/) * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/display-only-2-columns/#post-11358098) * Status: resolved