Card/Grid Style Event List format

I have made some changes.
The new format is as follows:

<div class="eventcard">
    <a href="#_EVENTURL">
        <img src="#_EVENTIMAGEURL" style="width: 100%;">
    </a>
    <div class="eventtimedate">
        #_EVENTDATES | #_EVENTTIMES
    </div>
    <div class="eventcontainer">
        <div class="eventtitle">
            <b>#_EVENTLINK</b>
        </div>
        {has_location}<p>#_LOCATIONTOWN, #_LOCATIONSTATE</p>{/has_location}
        <div>
            Available Space(s): #_AVAILABLESPACES
        </div>
        #_EVENTCATEGORIES
    </div>
</div>

with the accompanying CSS:

.eventcard {
    /* Add shadows to create the "card" effect */
    display: flex;
  	flex-direction: column;
  	max-width: 400px;
  	margin: 10px;
  	list-style-type: none !important;
  	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.eventcard:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.eventtimedate {
  color: #fff;
  text-align: right;
  background-color: rgb(108, 190, 70);
  padding: 5px 10px 5px 10px;
}
.eventtitle {
  font-size: 20px;
}

/* Add some padding inside the card container */
.eventcontainer {
    padding: 2px 16px;
}

How it looks now: https://joinkursus.com/locations/kursus-kahwin-wangsa-maju/

How can I make them stacked to the right?

Problem solved!

For anybody who’s interested, here’s how I formatted it:

1) Default event list format header:
<div class="eventcards">

2) Default event list format:

<div class="eventcard">
<a href="#_EVENTURL">
<img src="#_EVENTIMAGEURL" style="width: 100%;">
</a>
<div class="eventtimedate">
#_EVENTDATES  <div>#_EVENTTIMES</div>
</div>
<div class="eventcontainer">
    <div class="eventtitle"><b>#_EVENTLINK</b></div>
    {has_location}<p>#_LOCATIONTOWN, #_LOCATIONSTATE</p>{/has_location}
<div>Available Space(s): #_AVAILABLESPACES
</div>
#_EVENTCATEGORIES
</div>
</div>

3) Default event list format footer:
</div>

4) CSS:

.eventcards {
display: grid;
 
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 1rem;  
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  
}

.eventcard {
    /* Add shadows to create the "card" effect */
  	max-width: 400px;
  	margin: 10px;
  	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.eventcard:hover {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5);
}
.eventtimedate {
  color: #fff;
  text-align: right;
  background-color: rgb(108, 190, 70);
  padding: 5px 10px 5px 10px;
}
.eventtitle {
  font-size: 20px;
  line-height: 25px;
}

/* Add some padding inside the card container */
.eventcontainer {
    padding: 2px 16px;
}

• This reply was modified 6 years, 10 months ago by Saleh.
• This reply was modified 6 years, 10 months ago by Saleh. Reason: tidying up

I am not part of support… just some dude..

The grid “card” layout has been discussed here many times.
It is always great to see a new approach.

Thank you for posting your work it looks really nice.
Well done !!