I plan to improve the column generation in a future release. For now, you need to override the CSS that the plugin provides to get wider columns. The relevant styles as provided by the plugin are:
.letter-section ul.columns {
width: 100%;
box-sizing: border-box;
column-gap: 0.6em;
column-width: 15em; }
.letter-section ul.columns > li {
display: block; }
.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; }
These are programmatically generated with SCSS pre-processing following this loop:
.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);
}
}
The result of the above is that the columns numbered 2 through to 16 are each given a width of 15em by making the available space for all the columns max-width equal to:
the number of columns multiplied by 15em, added to "the number of columns reduced by one, multiplied by 0.6em"
This covers the 15em width of each column and 0.6em gap between the columns.
Thread Starter
peekal
(@peekal)
Thanks for the reply!
Sorry, but I’m not as technical as I’d like to be so i was wondering if you could give me the specific values I’d need to change and how I’d go about changing them if at all possible? Or if you plan to release any sort of customization like this that are built in soon then that would work too. If not then that’s fine, I’m sure I could figure it out eventually haha.
Oh, I’m really sorry I dropped the ball on this. I completely overlooked that you had replied.
If you want a maximum of 2 columns, as an example, you can try overriding with the following: (enter the code into “custom CSS” box in your theme’s “customizer” area – navigate to wp-admin -> themes -> customize):
.letter-section ul.columns {
column-gap: 0.6em;
column-width: calc(50% - 0.6em);
}
.letter-section ul.columns.max-0-columns,
.letter-section ul.columns.max-1-columns {
column-count: 1;
max-width: 50%;
}
.letter-section ul.columns.max-2-columns {
column-count: 2;
max-width: 100%;
}
Likewise, for a maximum of three columns you could try:
.letter-section ul.columns {
column-gap: 0.6em;
column-width: calc(33% - 0.6em);
}
.letter-section ul.columns.max-0-columns,
.letter-section ul.columns.max-1-columns {
column-count: 1;
max-width: 33%;
}
.letter-section ul.columns.max-2-columns {
column-count: 2;
max-width: 66%;
}
.letter-section ul.columns.max-3-columns {
column-count: 3;
max-width: 100%;
}
-
This reply was modified 4 years, 8 months ago by
Dani Llewellyn. Reason: fix column-width in "3 columns" example
-
This reply was modified 4 years, 8 months ago by Dani Llewellyn. Reason: revert last change - I think it works correctly as-is
