UPDATE: 9-19-2018: Displaying listings in a grid layout is now a standard feature for Pro users. Free users may upgrade to enjoy the dashboard grid settings or you may continue to use the following custom CSS method.
By default, Venture’s Event Listings display in a single column but creating a slick grid layout is super easy with just a little bit of custom CSS. All it takes is adding some declarations:
Creating a 2-col Layout
We want to change three primary items:
- the overall list wrap and justification
- add the columns
- remove the default image right align.
@media screen and (min-width: 767px) {
.vem-listing-[XXX] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
@media screen and (min-width: 767px) {
#vem-listing-[XXX] .vem-single-event.[grouped or ungrouped]{
width: calc(50% - 35px);
}
}
@media screen and (min-width: 767px) {
#vem-listing-[XXX] .vem-single-event-thumbnail {
float: none !important;
margin-left: 0px;
width: 100%;
}
}
Using More than Two Columns
You can adjust the number of columns displayed by adjusting the width values. For example, changing
width: calc(50% - 35px);
…to…
width: calc(33% - 35px);
…will give you a three column layout with 35px of space between each column. Using 25% will give you four, 20% delivers five, etc. etc. etc. Tweak the space value until you end up with a final result that makes your design heart smile 🙂
Notes:
For the #vem-listing-[XXX] selector, you’ll replace the [XXX] value with your list’s unique ID number, which is automatically generated for every list you create (cool, right?). Here’s how you can find it using a dev tool, like Chrome’s Inspector:
- Right click toward the beginning of the Listing.
- Look for a line with “vem-listing-[xxx]. That’s where you’ll find the number. You’ll also see a dedicated “vem-listing-id” value with the same number (never hurts to be sure, right?).