Thanks @tuanphan my site is h2hcottageco.com. But, here is the URL to the calendar page. I have not yet linked it to my main navigation yet until it is working.
https://h2hcottageco.com/kennisis-lake-availability-calendar
i only see only the originally orange (but now i changed them to green...) squares on mobile phone for all the events. I'm not seeing the pink squares for the event with "pink" added to the event name which is: /kennisis-lake-availability-events/event-two-nme24-pink
and here is the CSS code I am using:
/* Mobile Calendar */
@media screen and (max-width:767px) {
.has-event {
background-color: #f2b705 !important;
}
}
@media screen and (max-width:767px) {
a.background-image-link [href*="pink"] {
background-color: #f26bdc !important;
}
.has-event * {
color: white !important;
}
}