Jump to content

Events Page in Two Columns not Rows

Go to solution Solved by tuanphan,

Recommended Posts

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

 

Screen Shot 2022-01-23 at 2.50.07 pm.png

Screen Shot 2022-01-23 at 2.50.17 pm.png

Link to comment
  • Replies 7
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}

Link to comment
  • Solution
4 hours ago, michaelpga said:

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;
}

It looks fine here?

image.thumb.png.2b6dc191a15d4a50f9be5d80a896cf03.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.