After clicking on an event in calendar view, the popup window for the event will drift outside the sides of my phone's screen when I'm scrolling up and down the popup window on a mobile device.
I attached two screen shots from my phone. When I swipe my finger to scroll up and down the event page, the page will swipe outside of the phone screen.
The code didn't fix the issue unfortunately. I'm not able to watch the video you attached either for some reason. The video says, "Network Error." I did notice while inputting the code that I currently have this code in place:
After clicking on an event in calendar view, the popup window for the event will drift outside the sides of my phone's screen when I'm scrolling up and down the popup window on a mobile device.
Hello Matt,
Look like I can't re-create this problem on my device, can you show me a screenshot or better screencast to see what is happening to you?
Stachethemes Support
My Time Zone is GMT+3
Envato Profile | Facebook | Twitter | Newsletter | Rate & Review
I attached two screen shots from my phone. When I swipe my finger to scroll up and down the event page, the page will swipe outside of the phone screen.
What browser are you using? I can't reproduce this behaviour.
Stachethemes Developer
This occurs on any browser I use on my phone, but I typically use Safari and Google.
I still can't reproduce this but try following:
Go to Fonts & Colors -> Custom style tab and add follwoing css:
body.stec-modal-opened {
max-width: 100% !important;
min-width:0 !important;
width: 100% !important;
}
I'm attaching video of what I see on mobile.
Stachethemes Developer
The code didn't fix the issue unfortunately. I'm not able to watch the video you attached either for some reason. The video says, "Network Error." I did notice while inputting the code that I currently have this code in place:
.stec-layout-event-inner-intro-media-content,
.stec-layout-single-media {
max-height: 400px;
}
.stec-layout-event-inner-intro-media-content > div,
.stec-layout-single-media-content > div {
background-size: contain !important;
max-height: 400px;
}
.stec-layout-event-inner-location-left-button { display: none !important; }
Not sure if any of this could be causing the issue or not.
No, it's unlikely the problem to be from this css.
Do you have this problem on our demo page as well?
https://stachethemes.com/wp-demos/the-calendar/modal-pages/
Stachethemes Developer
Yes, I have the same issue with the demo.
Okay, I'll keep looking for a solution and will let you know.
Stachethemes Developer
Could you try adding following css in Fonts & Colors -> Custom style tab:
.stec-layout-event-inner.stec-modal {overflow-x: hidden !important;
}
Stachethemes Developer