Page displays and line wrapping

  • Hi there,

    I have created several custom page displays using your shortcodes, and they’re a working great. I noticed that the post/page titles are displaying but seem to wrapping to the next line too soon even though there is a lot of available whitespace on the line.

    I am using the BuddyX theme by the way. Is there a way to set the linewrapping for displays, say at a word-count or character-count rule? Or is this a theme related issue?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mungbean

    (@mungbean)

    Bump!

    Plugin Author Dani Llewellyn

    (@diddledani)

    The lines will wrap when the title is too long for the size of the column. The plugin uses the columnar layout by default, so there is likelihood of wrapping. You can increase the size of the columns by modifying the default CSS; an abridged version with just the attributes that you need to change to suit your site is below:

    .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 {
      max-width: 15.6em; /* 1*column-width + 1*column-gap */
}
.letter-section ul.columns.max-2-columns {
      max-width: 30.6em; /* 2*column-width + 1*column-gap */
}
.letter-section ul.columns.max-3-columns {
      max-width: 46.2em; /* 3*column-width + 2*column-gap */
}
.letter-section ul.columns.max-4-columns {
      max-width: 61.8em; /* 4*column-width + 3*column-gap */
}
.letter-section ul.columns.max-5-columns {
      max-width: 77.4em; /* 5*column-width + 4*column-gap */
}
.letter-section ul.columns.max-6-columns {
      max-width: 93em; /* 6*column-width + 5*column-gap */
}
.letter-section ul.columns.max-7-columns {
      max-width: 108.6em; /* 7*column-width + 6*column-gap */
}
.letter-section ul.columns.max-8-columns {
      max-width: 124.2em; /* 8*column-width + 7*column-gap */
}
.letter-section ul.columns.max-9-columns {
      max-width: 139.8em; /* 9*column-width + 8*column-gap */
}
.letter-section ul.columns.max-10-columns {
      max-width: 155.4em; /* 10*column-width + 9*column-gap */
}
.letter-section ul.columns.max-11-columns {
      max-width: 171em; /* 11*column-width + 10*column-gap */
}
.letter-section ul.columns.max-12-columns {
      max-width: 186.6em; /* 12*column-width + 11*column-gap */
}
.letter-section ul.columns.max-13-columns {
      max-width: 202.2em; /* 13*column-width + 12*column-gap */
}
.letter-section ul.columns.max-14-columns {
      max-width: 217.8em; /* 14*column-width + 13*column-gap */
}
.letter-section ul.columns.max-15-columns {
      max-width: 233.4em; /* 15*column-width + 14*column-gap */
}
    • This reply was modified 3 years, 8 months ago by Dani Llewellyn. Reason: fix code block formatting
    • This reply was modified 3 years, 8 months ago by Dani Llewellyn. Reason: add missing column-gap attribute to css code
    • This reply was modified 3 years, 8 months ago by Dani Llewellyn. Reason: add css comments explaining the calculations
    Thread Starter mungbean

    (@mungbean)

    Thanks! The theme I am using was also able to produce a similar CSS solution.

    https://www.ads-software.com/support/topic/line-wrapping-with-a-z-listing-plugin/?#post-14701825

    Will you be adding this code/capability to the plugin settings so that the width can be adjusted by the user without adding custom code snippets?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Page displays and line wrapping’ is closed to new replies.