Using Event Thumbnails On Mobile Calendar

Site URL: https://www.ramjamrecords.co.uk/

Hi,

Please can anyone advise how I can force the calendar to display event thumbnail images instead of the shading on mobile (so it is the same as desktop).

Thank you,

Tom

(I noticed that @tuanphan had helped many with similar calendar questions but couldn't see one similar - thanks!)

I don't see thumbnail images on desktop event. Can you take a screenshot?

Thanks @tuanphan - events only start in August which may be why they arent showing for you

On 7/30/2021 at 8:36 PM, CoolshipMarketing said:

Thanks @tuanphan - events only start in August which may be why they arent showing for you

Try adding to Design > Custom CSS

.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}

@tuanphan sadly this doesn't work - it just moves all of the shaded boxes & numbers so they aren't in line.

The below is a screenshot from phone emulator, but it was the same on actual mobile. (I've removed again for the moment as the site is live).

Do you have any other suggestions please?

Thank you!

Did you ever find a solution for this? It's not clear to clients what the shaded boxes implies on mobile.

On 9/28/2022 at 10:18 PM, nathan.j.p said:

Did you ever find a solution for this? It's not clear to clients what the shaded boxes implies on mobile.

Can you share link to page where you have problem? We can take a look

Hi I am looking for a similar solution to this. All I want is to be able to display the event featured image on my mobile site. Previous codes I have looked have shown it possible on squarespace desktop but not on an actual mobile browser.

On 12/5/2022 at 2:27 AM, Messymerlion said:

Hi I am looking for a similar solution to this. All I want is to be able to display the event featured image on my mobile site. Previous codes I have looked have shown it possible on squarespace desktop but not on an actual mobile browser.

Hi,

Can you share link to page where you use calendar? We can try some code

@tuanphan My apologies for the very very slow reply. I am again trying to solve

An example page where this is not working is: https://www.ramjamrecords.co.uk/gig-event-calendar
(It's also on https://www.ramjamrecords.co.uk/ at the bottom).

I found your code shared on another thread 

"

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

"
Which you may see - however this has unfortunately not resolved it for me.

Thank you again

On 3/23/2023 at 11:42 PM, CoolshipMarketing said:

@tuanphan My apologies for the very very slow reply. I am again trying to solve

 

An example page where this is not working is: https://www.ramjamrecords.co.uk/gig-event-calendar
(It's also on https://www.ramjamrecords.co.uk/ at the bottom).

I found your code shared on another thread 

"

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

"
Which you may see - however this has unfortunately not resolved it for me.

 

Thank you again

It looks like no way to make image appears on mobile. SS doesn't render image on mobile so I dont think of any way to solve this.