CCavanagh Posted October 22, 2019 Share Posted October 22, 2019 I have an events page with a standard Squarespace calendar on it. When viewed on a desktop the tiles display the images that I have chosen, however, when viewed on a tablet or a phone the tiles just show a darker shade of grey. Is there a way that I can colour code the events (by category if possible) so that even if the image doesn't show the category of the event will be apparent. Thank you in advance for any helpful advice. Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @CCavanagh Have you solved the problem yet? If no, can you share site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
CFlo Posted April 18, 2022 Share Posted April 18, 2022 Wondering if anyone has a solution to this? I'm experiencing the same issue littlebitofeverythingdiystudio.com Link to comment
tuanphan Posted April 22, 2022 Share Posted April 22, 2022 On 4/19/2022 at 12:41 AM, CFlo said: Wondering if anyone has a solution to this? I'm experiencing the same issue littlebitofeverythingdiystudio.com Try adding to Design > Custom CSS @media screen and (max-width:767px) { .yui3-squarespacecalendar .compact-layout .background { display: flex !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
hannah.dossary Posted July 12, 2022 Share Posted July 12, 2022 hey @tuanphan thanks for the code! it didnt seem to work but i adjusted it to: @media screen and (max-width:767px) { .yui3-squarespacecalendar .compact-layout .background { display: block !important; } } and it seems to start doing something! Although the day markers are now showing off-aligned. Do you know what i can do to bring them back up to centre of the background image? Website: https://www.supervision4therapists.com/schedule Password: test Thank you! Link to comment
tuanphan Posted July 13, 2022 Share Posted July 13, 2022 On 7/12/2022 at 7:06 PM, hannah.dossary said: hey @tuanphan thanks for the code! it didnt seem to work but i adjusted it to: @media screen and (max-width:767px) { .yui3-squarespacecalendar .compact-layout .background { display: block !important; } } and it seems to start doing something! Although the day markers are now showing off-aligned. Do you know what i can do to bring them back up to centre of the background image? Website: https://www.supervision4therapists.com/schedule Password: test Thank you! Use this code @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%); } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mjai Posted January 25 Share Posted January 25 On 7/13/2022 at 9:07 AM, tuanphan said: Use this code @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%); } } Hi @tuanphan Thanks as always for your guidance. I tried the above code and while it works on the 'mobile view' inside Squarespace, on iphone in normal vertical view the event date squares are still showing up as light grey. When I turn the phone sideways the colored dates appear the way I'd like them. Is there a fix for lower width px display? Is it a breakpoint issue? Here's the website: https://maroon-goby-bew9.squarespace.com/calendar password is: 252525 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment