Jump to content

Calendar formatting for mobile - Any help would be appreciated.

Go to solution Solved by creedon,

Recommended Posts

I've been really struggling to get the mobile view of Squarespace's calendar to look right. Here are some possible solutions in order of preference. 


1. Keep it simple and find a way for the calendar to format properly in mobile.

  • Most importantly, this includes having the underline of the flyout on vertical mobile not behave like strike-through of the title.
  • This also includes improving the functionality of the flyout on horizontal mobile to eliminate the poor user-experience of having hover effects on a click-through item on a cell phone screen.
  • And in a perfect world, this would also include retaining the thumbnail for the calendar in all locations. 
    • One compromise on thumbnails in the vertical mobile view is changing the color of the event dates. Not ideal, but I can work with it. 

2. Remove the flyout completely while still enabling the viewer to click on event days. 

  • This is a compromise. If the flyout doesn't work properly on mobile, perhaps I can just get rid of the flyout while still permitting for clickthrough when someone clicks an event date. 
    • I've found a way to get rid of the flyouts, but it also disables clickthrough for the event dates. So, that doesn't help. 

3. Find a calendar plugin that is professional in quality but doesn't charge a monthly fee. 

  • I'd rather not go this route, but I'm looking to see what options are available. If anyone recommends another calendar product (that doesn't charge a large monthly fee), I'm open to it. 


If anyone could help, I'd be appreciative. I've spent an embarrassing amount of time spinning my wheels on this one and have nothing to show for it. 

Link to comment
  • Solution

I don't have any solutions but some observations.


Most importantly, this includes having the underline of the flyout on vertical mobile not behave like strike-through of the title.

Note for other helpers, it is not a strike through. It is a CSS background-image property, part of the Flex animation. It appears the issue is related to the beloved-sans font having a large descender height causing the background-image to overlap when things get tight.



Here is the descender when I force the font-family to sans-serif,


This is how it looks when cramped.


A solution to this issue might be to not use the beloved-sans for the calendar or not use the font.

I'm not a font expert so I don't know if my terminology is right.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Just wanted to say thanks for your help. You guys have helped me plenty of times over the last couple years ((a few times directly, many times indirectly). 

For this one, I think the solution for now is simply to not make the calendar the focal point of the website. The site is still in the inception stage, so this is an easy shift.

Thanks always

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.