michaelpga Posted January 23, 2022 Share Posted January 23, 2022 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 Link to comment
tuanphan Posted January 24, 2022 Share Posted January 24, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
michaelpga Posted January 25, 2022 Author Share Posted January 25, 2022 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 Link to comment
tuanphan Posted January 26, 2022 Share Posted January 26, 2022 Add this CSS /* hide some text from event excerpt */ .eventlist-excerpt>p:not(:first-child) { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
michaelpga Posted January 27, 2022 Author Share Posted January 27, 2022 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 tuanphan Posted January 27, 2022 Solution Share Posted January 27, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment