Image disappears on Calendar Event Day Mobile

Site URL: https://littlebitofeverythingdiystudio.com

Hello! 

I am wondering why and how to fix the events calendar on mobile - the day of the event the image no longer shows, it's just a darker shade and is difficult to see. Is there a way to get the image to appear on mobile as well? 

On the homepage - the event is in May. Image appears on desktop but not on cell phone.

Thanks, 

C

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
	display: flex !important;
}
.yui3-squarespacecalendar .compact-layout .marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
}

I'm having the same problem on my site, and this CSS mod didn't help, it just moved the day number outside the box and still didn't make the image show. Is there anything else I can do? I've had to list the events below the calendar as text links so that users can still click on them from a mobile, which means the calendar is kind of pointless.

https://parmenterforge.co.uk/course-calendar

6 hours ago, ParmenterForge said:

I'm having the same problem on my site, and this CSS mod didn't help, it just moved the day number outside the box and still didn't make the image show. Is there anything else I can do? I've had to list the events below the calendar as text links so that users can still click on them from a mobile, which means the calendar is kind of pointless.

https://parmenterforge.co.uk/course-calendar

Updated the code. You can check it again

That's definitely helped - thanks! Is there a way to highlight the events in the calendar with, say, a white outline or a lighter coloured square? My events are apprearing as a grey day in a black calendar, so kind of hard to spot.

15 hours ago, ParmenterForge said:

That's definitely helped - thanks! Is there a way to highlight the events in the calendar with, say, a white outline or a lighter coloured square? My events are apprearing as a grey day in a black calendar, so kind of hard to spot.

You solved?

Looks fine on PC, but on an iPhone it looks like this:

On 8/2/2022 at 11:21 PM, ParmenterForge said:

Looks fine on PC, but on an iPhone it looks like this:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
td.has-event .marker div {
    color: white !important;
}
}

Awesome!! Thank you!!!

Hey!

I'm running into the same issue with my calendar. I used the code above and it does show the image now on mobile, but now my desktop site doesn't show images. Also with mobile it doesn't show the entire image, just a small corner of it. 

edit: So it works on the squarespace website itself when you swap between desktop and mobile view. But once you actually pull it up on a phone it still shows the dark imageless tiles for those dates. 

squarespace site view: https://gyazo.com/56e66703e9d21cc4f336f9a5a9291bfa

actual mobile view: https://gyazo.com/2f7fb191565f145fce6d96fbba6d5117

link to site: https://www.wiz4rdssleev3s.com/events