Issues with the display of our event calendar

Please bear with me as this is my first site. :sweat_smile: So, I’ve created an event calendar from a collections list and it was previously working great, but now the design is sort of broken and needs fixing, but I’m at a loss.

The calendar issues I desperately need help solving:

  1. After the calendar was built, I noticed that for it to display correctly, no more than 8 events could be shown at one time on desktop. If there was more than eight, the design would start breaking. If there was an odd number we would fill the empty space with a placeholder.

The original plan was, when new events were added, to have the entire section stretch. The magenta section on the left with the growing events on the right.

Sometimes it actually seems to work like this, but oddly other times it displays only 8-10 events, and to see the rest of them, you have to scroll the entire calendar section. Not a great experience. Luckily, now it doesn’t seem to be doing that, but I’m not sure why it would behave different day-to-day.

  1. The size of the event boxes (collection list inside of a 2-column grid) should all be the same, but (I think) when there are more than 8 events, the bottom row’s boxes are longer, causing there to be an issue with the image fitting into the space correctly (offset). This is currently happening.

Any idea how to fix these two issues? Thank you!

Here is my site Read-Only: [[LINK]1
(how to share your site Read-Only link)

hi @fia expanding / stretching pink element on left can be done via WF GUI setting max-height on top and bottom element. If there is an odd number of items there is simple JS that will spread :last child over 2 columns so there is no need to adding empty event to fill gap. More info about how to in video.

const eventContainer = document.querySelector(".collection-list")
const l = eventContainer.children.length

if(l % 2 === 1) { = 'span 2'

PS: you should change of Calendar Event Image height:19em to 100% to fit img properly to your container

1 Like

Hey there @Stan. Thank you for taking the time to help me with this issue. Just now getting to implement this now, as I’ve been out for a couple of weeks.

I took your suggestion of adding a max height for the left Logo Container element (600px), as well as for the green Newsletter Container (800px). I went ahead and adjusted for all the breakpoints. In Webflow’s preview mode it looks and acts perfectly. Yet after I publish the changes, the calendar still scrolls in Chrome, even after a hard refresh and clearing the cache. I made sure all the elements within the collection list were set to Overflow-hidden.

It works great in Safari, though. Any ideas why this would persist in Chrome?

hi @fia your original link looks as as before (nothing is changed and not working), so to be able to check where the problem can be you should provide link to current project version read only and live.

hi @fia if this is your new fixed version you should revisit it again as sticky is not working in any browser. Once you will fix it and you will still have an issue. I will look on it.

EDIT: I was now reading your original request and you have requested stretching pink area thats done. I have provided solution for fitting your images correctly and add extra code to fit correctly even and odd number of events. I have tested now and all task were solved and working as expected. My question is - what do you mean with the “calendar still scrolls in Chrome”?


Here’s what I mean by the calander still scrolling:

Hi @fia here are my suggestions why it behaves this way but its not clear what your intention with scroll is I mean if you want it or not.
sorry for longer video without solving chrome issue as it is almost 1AM and my brain refusing work on full capacity :melting_face:

1 Like

Hello @Stan, yes, I think we want to hold off on the odd number span for now, but I thank you for this technique. We may employ it here soon, but also: you figured out the scroll issue! Thank you, thank you!

1 Like