The simplest approach is to use CSS:
.display-posts-listing { columns: 2; column-gap: 32px; }
.display-posts-listing li { break-inside: avoid; }
@billerickson thank you sir, that did get the text to break into columns.
The width between columns is awkwardly wide for my site though.
I tried adjusting the 32px in that code down, but no matter how low I take the number it only slightly decreases the width. Adjusting to 30 or 1 both result in the same slight decrease.
Any input?
Thanks again!
The “columns: 2” part tells the browser to make two equal width columns. The “column-gap: 32px” tells the browser to leave 32px of space between the two columns.
IF you want the columns smaller, you could:
a) Increase column-gap to a larger number, like 100px
b) Increase the number of columns (ex: columns: 3; )
c) Decrease the width of the container. (ex: .display-posts-listing { max-width: 500px; } )
@billerickson thank you sir. I may not have been clear though – I’m trying to reduce the space BETWEEN columns, not the width of the columns. And reducing the 32px is not working
If you remove the column-gap property, there will be no space between the columns. If you’re still seeing space between them, it’s likely that your theme is adding padding or margin to the list item. Something like this would help:
.display-posts-listing li {margin: 0; padding: 0; }
I’m sorry but resolving theme-specific CSS issues is beyond the scope of this support channel.
@billerickson I’m sorry to nag, but I was hoping you help me with one more quirk I can’t seem to resolve.
My grid is supposed to include two categories of posts.
I also want it to display all matching posts alphabetically by title – regardless of which of the two categories it comes from. My code is successfully pulling both categories in, but its alphabetizing all of Category 1 then starting over with alphabetizing Category 2. Any help?
[display-posts posts_per_page=”50″ category=”category-1, category-2″ order=”ASC” orderby=”title”]
One other question: Is there anyway to get it to color code the displayed text (post title) based upon the category it came from? Like Category 1’s text is blue and Category 2’s text is red? I can’t find anything like that in the guide.`
