|
He Zhengrui
|
August 17, 2020 at 2:53 am
Hi there,
I am unable to view events while on my mobile phone but on desktop it works fine;
Please see attached screenshots
https://imgur.com/a/51PybBb
also, I will append the link for the actual page where this issue is occurring as well
|
|
He Zhengrui
|
August 17, 2020 at 2:56 am
This reply has been marked as private.
|
|
Tony
|
August 17, 2020 at 6:29 am
Hi there,
The calendar hides the event text on mobile with some CSS which on your site makes it appears as there is no event.
If you add this:
@media only screen and (max-width: 480px) {
#espresso_calendar .fc-event-title {
display: block;
}
}
To Dashboard -> Appearance -> Customize -> Additional CSS
Does it show the events then?
|
|
He Zhengrui
|
August 20, 2020 at 7:40 am
This reply has been marked as private.
|
|
Tony
|
August 20, 2020 at 8:30 am
Did you try my suggestion and add the CSS in the above location?
Looking at your site the calendar items now show so I’m guessing so.
Unfortunately, the class or id “.fc-event-title” does not even appear on mobile versions
Markup isn’t removed from the output, it’s simply styled differently, so the elements with class .fc-event-title do appear on mobile versions.
You’re looking at the full calendar day elements (.fc-day) which make up the calendar itself, the events/calendar events are laid out on top of those, not within them.
|
|
Tony
|
August 20, 2020 at 8:42 am
I forgot to compare with mobile (which doesn’t show the elements) but the elements are there.
I can see the CSS is being added to the page, but it may be overridden.
Try changing the above to use display: block!important;, does it display for you then?
|
|
He Zhengrui
|
August 21, 2020 at 4:03 am
Hi Tony, i have just tried it and it does not seem to work.. i’ve tried to go about it but cant seem to wrap my head around this issue.
Please see the screenshot here
https://imgur.com/jfs3wgC
After your explanation, i get that it is an overlay for the events to appear based on days/dates but i cannot seem to get it to show up no matter how i toggle the css in the developer tool
Looking forward to your professional opinion!
|
|
Tony
|
August 21, 2020 at 4:40 am
You need to fix the CSS, its different from above. This is the CSS you’ve added:
@media only screen and (max-width:480px){
#espresso_calendar .fc-event-title{
display:block important;
}
}
It should use display:block!important;, so:
@media only screen and (max-width:480px){
#espresso_calendar .fc-event-title{
display:block!important;
}
}
With that fixed, the elements show as expected: https://monosnap.com/file/94OZf6iMss5newe6I18M6aKTPmbxe4
|
|
He Zhengrui
|
August 24, 2020 at 1:46 am
okay i forgot the ! haha, thanks Tony!
|
|
He Zhengrui
|
August 24, 2020 at 1:47 am
it is working now!
|
|
Tony
|
August 24, 2020 at 6:47 am
You’re most welcome, I’m glad it’s working now.
|
