Events Page in Two Columns not Rows

Site URL: https://www.nourish.melbourne

Hello community,

I am struggling to make my Events homepage look nice. I am wanting to display two events in columns, not rows.

I would also like only part of the event blurb text to read in the homepage and then the full description (Which is rather lengthy) to display in the 'learn more' page link.

Can anyone suggest the custom CSS to do this? Please see screenshots attached for examples.

Version 7.1

www.nourish.melbourne

Add to Design > Custom CSS

/* event 2 columns */
@media screen and (min-width:992px) {
.eventlist.eventlist--upcoming {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.eventlist.eventlist--upcoming img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.eventlist-column-thumbnail {
    background-color: transparent;
    width: 100% !important;
    padding-bottom: 100% !important;
}
.eventlist-event {
    flex-direction: column;
    justify-content: center;
    margin-top: 0 !important;
}
.eventlist-column-info {
    width: 100% !important;
    margin: 10px !important;
}
}

Thank you so much @tuanphan - can you also please help me show only the top part of the description in the Event homepage - I don't want the full description to appear until each event is opened in their individual pages. See screenshot attached for more info - thank you

Add this CSS

/* hide some text from event excerpt */
.eventlist-excerpt>p:not(:first-child) {
    display: none;
}

Thank you @tuanphan - the event description part worked however for some reason the event listings have displayed underneath each other again and the event image is huge! Can you please help me resolve.

See the code I'm using below:

/* resize mobile footer image */
@media screen and (max-width:767px) {
    footer.sections .image-block {
        width: 50% !important;
        margin: 0 auto;
}
}

/* event 2 columns */
@media screen and (min-width:992px) {
.eventlist.eventlist--upcoming {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.eventlist.eventlist--upcoming img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.eventlist-column-thumbnail {
    background-color: transparent;
    width: 100% !important;
    padding-bottom: 100% !important;
}
.eventlist-event {
    flex-direction: column;
    justify-content: center;
    margin-top: 0 !important;
}
.eventlist-column-info {
    width: 100% !important;
    margin: 10px !important;
}
}

/* hide some text from event excerpt */
.eventlist-excerpt>p:not(:first-child) {
    display: none;
}

I'm getting the giant box under my events as well. Anything I could do to tighten this up to 60px below the image?

On 3/31/2024 at 5:44 AM, NobleTimothy said:

I'm getting the giant box under my events as well. Anything I could do to tighten this up to 60px below the image?

What is page url?