- This topic has 10 replies, 3 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 16, 2020 at 9:51 am #1492295Orin
Dear GeneratePress,
I’m using SyncroMSP as my help desk and calendaring solution. They provide a way to embed my bookable calendar on my website.
Please check it out here:
If you go to that same page in a mobile browser, you cannot see the calendar. Their support team said that this is beyond their scope of support. But here is what they told me:
“The script is being cut off because the css is shrinking the page. The javascript is also designed for best viewing on large format screens. If you would like the page not to shrink, I would advise creating a media query for the inside-content on that page to increase the size of the body. This page may provide a bit more info on that end, https://stackoverflow.com/questions/46395377/is-it-possible-to-target-only-my-home-page-with-a-media-query”
I don’t really understand what he is telling me. I am hoping that the GeneratePress team can help me solve this since it might relate to this issue.
Thank you!
October 16, 2020 at 11:19 am #1492418TomLead DeveloperLead DeveloperHi there,
The page is “shrinking” so it can become mobile responsive.
If I’m understanding correctly, they’re asking you to make it so your website isn’t mobile responsive so their iframe will display correctly. While this is possible, I definitely don’t suggest doing it.
The issue here is that they’re absolute positioning their iframe on the page, and then using some padding percentage CSS. This will work on desktop, but will cause issues like this on mobile.
October 16, 2020 at 1:00 pm #1492495OrinThank you Tom! I will go back to them and see what they say. I appreciate your help.
October 17, 2020 at 11:12 am #1493501TomLead DeveloperLead DeveloperNo problem!
October 19, 2020 at 6:14 am #1495430OrinHey Tom,
They got back to me. Here’s the reply. Curious to see what you think? Thank you!
You can target a specific page only via css as well as target solely mobile devices using @media queries. I can see what he is describing and how it may be not working properly. It would be best to use media queries. iframes in general are not great code, however, that is what is chosen to create this module.
You can try the following, but it wouldn’t be great code.
.rs-widget-container iframe {
position: relative;
top:0;
bottom: 75%;
width: 100%;
height: 700px;
}October 19, 2020 at 8:06 am #1495694DavidStaffCustomer SupportHi there,
well thats a weird reply from the developers ๐
Try this CSS – its in the media query and is slightly more specific so should override their default CSS:@media(max-width: 768px) { .entry-content .rs-widget-container iframe { position: relative; top:0; bottom: 75%; width: 100%; height: 700px; } }
October 19, 2020 at 10:43 am #1495963OrinThanks David! I agree. It felt VERY unprofessional.
Okay, I used what you suggested.
@media (max-width: 768px) { .entry-content .rs-widget-container iframe { position: relative; top:0; bottom: 75%; width: 100%; height: 800px; } }
It is now working on mobile, however when I go to it on a desktop the width is the same is it is on a mobile device.
Thanks again for helping me with this!
October 19, 2020 at 10:52 am #1495980OrinI changed it around a bit, closer to what they suggested.
.rs-widget-container iframe { position: relative; top:0; bottom: 75%; width: 100%; height: 800px; }
It’s working for the most part. The only bummer is on a mobile phone when in portrait mode Sunday is cutoff on the right side and there is no way to scroll over.
October 20, 2020 at 5:09 am #1496827DavidStaffCustomer SupportContent within iFrames that are served from a 3rd party can only be re-styled from the 3rd party server. Any CSS we try to apply at your site level simply wont work.
The only thing you may be able to do is to disable the mobile viewport on that particular page – which Leo provides a snippet for:
https://generatepress.com/forums/topic/using-generate-disable-mobile-plugin/#post-392268
The other course of action is ask the developer if they have any other method of serving up the calendar – they really should be thinking about making it mobile responsive ๐
October 20, 2020 at 5:31 am #1496856OrinThanks again David! I completely agree. However, they already told me they’ve hardly received any tickets regarding this issue so it’s not a priority to change the way it functions. I wonder if most people aren’t using this feature of their software.
Well, at this point it’s good enough. I’ll never be booking appointments on Sundays anyway, so it’s not a HUGE deal.
I appreciate your help and for going above and beyond on supporting me.
October 20, 2020 at 7:13 am #1496989DavidStaffCustomer SupportGlad we could be of some help!
-
AuthorPosts
- You must be logged in to reply to this topic.