Jump to content

Mobile Calendar Excerpt Display Adjustment

Recommended Posts

Hi!

I am hoping to get some help with adjusting the way the mobile calendar block works, specifically, I would like for the text of excerpts to be contained and not displayed in a flex box. In other words, I would like for the excerpt box to be a certain set height and for any overflow text to be viewable via a scrollbar, within the excerpt box. The desktop view has this functionality but it appears that once the site is rendering mobile view, the scrollbar for the excerpt is not longer offered.

I am aware that the easy solution is to simply limit the amount of information is entered into event excerpts. However, this site was previously on Wordpress which did offer this functionality in mobile view.

Additionally, I am hoping to retain calendar thumbnails. I've hunted the message boards without finding a clear solution. This appears to be a limitation of the calendar but I find it hard to believe that there isn't some sort of CSS that forces it to be displayed in scaled to the calendar tile.

Really looking forward to anyone's help on this. Thank you!!

Link to comment
  • Replies 2
  • Views 308
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Screenshot of what I am trying to avoid attached.

Interestingly, when I turn my mobile device (iPhone 15 Pro Max) to landscape orientation, thumbnails are displayed, AND excerpts are given a contained field where text overflow is viewed via a scrollbar!! Would LOVE for the same functionality to be present when mobile devices are viewing the site in portrait orientation.

Screenshot 2024-05-03 at 6.02.39 PM.png

Link to comment

This was my response to my client to add context to my understanding of the situation. Really hoping someone much smart than me can help.

 
Hi! Thank you for your feedback on the mobile version of the calendar! I have been meaning to bring this up but you beat me to it. Sorry ahead of time for the somewhat lengthy response -- this is an unexpectedly complex issue that occurs when certain conditions are present.
 
-Regarding the calendar thumbnails-
What you are seeing is a limitation of Squarespace's mobile functions. Depending on the device screen size, there comes a certain point where thumbnails are not displayed and blank tiles replace the thumbnails. You can see this in action if you turn your mobile device to landscape orientation while viewing the calendar - the thumbnails will appear as expected as the device screen size has essentially doubled in width. This is telling the engine to display thumbnails as you'd see on your desktop.
 
As I was building the site, I hunted and hunted for a solution to add thumbnails to the mobile calendar in portrait view to no avail. All of the forum posts requesting this functionality seemed to come up empty handed. I will keep an eye out for a solution. If you'd like, I can add a note for mobile viewers to rotate their devices to view thumbnails. Not sexy....I know.
 
 
-Regarding the excerpt text overflow in the mobile calendar-
 
A few notes:
 
• The default function is to display the entire excerpt in a flexible container (one that adjusts in size depending on the size of the excerpt), without a scrollbar, when viewing the calendar in portrait orientation (how we all hold our phones). Interestingly, when viewing the calendar in landscape orientation as previously mentioned, the excerpt scrollbars are enabled and this is not an issue. On desktop view, you will see that a scrollbar is generated when necessary as well.
 
Unfortunately, the Squarespace engine does not give a toggle to enable / disable this scrollbar on mobile. I've reached out to the Squarespace community for a solution to make excerpt boxes contained to a static size, and a scrollbar populate should the excerpt require it when a viewer is visiting the site in portrait orientation. Upon finding a solution, I will test & implement it.
 
• In the meantime, I have removed the "coming soon" section and increased the overall size of the calendar for the desktop view. This will help with limiting the potential of text overflow into the section below the calendar in mobile view. A small note has been added below the Calendar of Events header to help people using the site, "Scroll past the calendar to see upcoming events in list view.".
 
There is the option to reduce the overall size of the calendar (by about 10%) in mobile mode only. By doing so, the entire excerpt is hidden while keeping the title of the event when tapping on the date. How do you feel about this?
 
The quickest middle-ground solution while I wait for support on the matter is to reduce the information in the excerpt field if possible. This will not affect the actual event page itself i.e. https://www.theargyros.org/calendar/songs-and-stories-with-roger-mcguinn (the excerpt is set to only display the first paragraph).
 
I am on standby and look forward to your feedback!
Link to comment

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.