Client has major display issue with Collection List

Hello, there’s a weird display issue with a site I designed for a client. They are claiming that even after they clear their cache, there’s major issues with how this event calendar looks on their laptop. I’ve tried it on my Macbook, iPad, and iPhone. As well as on Webflow in the Designer, but I do not understand why they are seeing this, because all looks normal on my end.

They are using a 15” screen laptop with resolution set at 1920 x 1080. They are mainly using Chrome, but have tried in Microsoft Edge and it is the same. They see it both in Webflow and on the live site.


Here is my public share link: [LINK]
(how to access public share link)

I’m also seeing what you’re seeing.
I know this doesn’t really help, but I tried everything I could think (except using windows cause I don’t have windows :sweat_smile:) but I couldn’t recreate what they see.

I hope someone can help! :smiley:

Thank you for trying!

hi @fia my guess is they have some browser extension that render Grid structure in some strange way. Ask them for as much information as you can, type OS and browser, number OS and browser etc. ask them to open website on several computers to see if issue persist. If it is only on one comp tell them disable all browser plugins/extensions.

EDIT:
one thing I see is that you have overflow: scroll on each element of Grid structure. These are calendar-section, calendar-container, collection-list-wrapper, collection-list, calender-collection-item that may have cause issue to render these scrollbars. IMO there is no reason to have overflow:scroll on these.

Windows is the OS, they tried Chrome, as well as Edge and had the same issue.

In terms of the Collection list. The entire calendar is meant to scroll when there are more than 8 events. Although, they seem to just always populate the latest 8. Do I have superfluous overflow scrolling?

on several computers or just one?

Waiting to hear, but it sounds like they’ve only tested it on one computer

ok but try turn of these scrolls as IMO they do not have any effect as far as I see on my side. I have tried changing width and/or zoom content to see what purpose scroll have and didn’t find any reasons why they are there.

Also, this site is the first and only site I’ve built on Webflow. Based on what I said above- I want the calendar to scroll if there are more than 8 events active. Do I have the overflow scroll on too many elements here?

Just read your last message. To be clear, I only need overflow scroll on the very outside container, in case they want to display more than 8 events?

It’s been a bit since I’ve built this and I’m worried about breaking the design. Is there a way to see which element that I need overflow:scroll applied to for it to display new collection items?

The client got back and it’s displaying fine on their Mac devices, but they tried on another windows computer that’s never accessed the site before, and the problematic displays are there with the Windows computer.

I cant test scroll as there is only 8 items but I see that you have set max-height: 250vh so in this case you can set all classes that have overflow: scroll to hide scrollbar

here is example


.calendar-section,
.calendar-container,
.collection-list-wrapper,
.collection-list,
.calender-collection-item {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

.calendar-section::-webkit-scrollbar,
.calendar-container::-webkit-scrollbar,
.collection-list-wrapper::-webkit-scrollbar,
.collection-list::-webkit-scrollbar,
.calender-collection-item::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

you can find more how to hide scrollbar on internet

etc.etc.etc. :wink:

Put this in the head or body for the page or for the code for the entire site?

Basic rule is that CSS is placed in head and body is mainly used for JS to take action when site content is loaded . So this CSS should be in head of site setting, page setting or in embed. Your choice :slight_smile:

Thank you for your help so far. I entered that code into the Head in the site settings in between some style tags and published it

sound good to me , so let wait what client will say :wink:

1 Like

THANK YOU FOR SAVING ME! It worked!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.