How to make myVr calendar on external website more mobile friendly?


  • Newcomer

    Hi,

    I have been able to use the calendar app to create html code to display the myVR calendar on my website. It displays fine on desktops and on my tablet. However, on my iphone the calendar is huge and you can only see parts of it.

    My website is below if you want to see it on an iphone: www.surfersridge.com

    Is there a way to make it more mobile friendly so that it becomes smaller on a smartphone?

    Thanks.


  • Leader

    @Surfers'-Ridge

    I'm probably going to show my HTML ignorance here, but...

    I think when you're inserting the HTML code, do you include <img style="max-width: 100%;" height="auto".....

    I use that code for creating mobile friendly HTML messages in my templates.

    Jenny


  • Newcomer

    @Jenny-Oest , I am no html expert either! Here is the code I used from the calendar widget:

    <script id="myvrCalendarScript" type="text/javascript">
    (function(m,y,v,r,t,a,g){m.MyVRWidgetObject=t,m[t]=m[t]||function(){
    (m[t].q=m[t].q||[]).push(arguments);},m[t].l=1new Date(),a=y.createElement(v),
    g=y.getElementsByTagName(v)[0],a.async=1,a.src=r,g.parentNode.insertBefore(a,g);
    }(window,document,'script','https://static.myvr.com/public/calendar/widget.js','myvr'));
    myvr('calendar', {propertyKey:'861df70bdf81c3ed', showRates:true});
    /

    You can optionally specify a unique HTML element id as a 3rd parameter
    above. If specified, the calendar will be rendered at the element
    instead of inline.
    myvr('calendar', {
    propertyKey:'861df70bdf81c3ed',
    showRates:true,
    elementId:'#elementId'
    });
    */
    </script>


  • Leader

    @Surfers'-Ridge - Ok this official exceeds my knowledge base. LOL I bet a problem ticket would get this resolved for you "tout de suite"?


  • MyVR Employee

    Hi @Surfers-Ridge,

    The calendar widget automatically resizes based on the screen size that it's being viewed on. Looking at your site, the issue seems to be with the rates being displayed on the calendar. When the rates are displayed on a smartphone sized screen, the calendar can only compress so much because of the text.

    0_1517359488659_Screen Shot 2018-01-30 at 4.31.06 PM.png

    I recommend adding this CSS to your site. It will hide the rates only on smartphone sized screens, allowing the calendar to fully shrink to fit the screen.

    @media (max-width: 768px) {
    	.myvr-calendar-widget table.myvr-calendar-month td.month-cell {
    		font-size: 0px;
    	}
    	.myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
    		font-size: 18px;
    	}
    }
    

    0_1517359548655_Screen Shot 2018-01-30 at 4.39.51 PM.png

    Cheers,
    Danny


  • Newcomer

    Danny,

    Thanks, I'll give it a try and see if I can figure out how to get it into the css section. I will post back!


  • Newcomer

    Hi Danny,

    I've tried to copy and paste the above code into the mobile.css (see below) but it doesn't save...I think it's the '@media'

    *#dm *.dmBody div.u_1260497651 {
    float : none !important;
    top : 0px !important;
    left : 0 !important;
    width : 100% !important;
    position : relative !important;
    height : 531px !important;
    padding-top : 0px !important;
    padding-left : 0px !important;
    padding-bottom : 0px !important;
    margin-right : auto !important;
    margin-left : auto !important;
    max-width : calc(100% - 0px) !important;
    margin-top : 10px !important;
    margin-bottom : 10px !important;
    padding-right : 0px !important;
    min-width : 25px !important;
    text-align : center !important;
    }

    @media (max-width: 768px) {
    .myvr-calendar-widget table.myvr-calendar-month td.month-cell {
    font-size: 0px;
    }
    .myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
    font-size: 18px;
    }
    }

    This is the calendar html I use for the calendar widget

    <script id="myvrCalendarScript" type="text/javascript">
    (function(m,y,v,r,t,a,g){m.MyVRWidgetObject=t,m[t]=m[t]||function(){
    (m[t].q=m[t].q||[]).push(arguments);},m[t].l=1*new Date(),a=y.createElement(v),
    g=y.getElementsByTagName(v)[0],a.async=1,a.src=r,g.parentNode.insertBefore(a,g);
    }(window,document,'script','https://static.myvr.com/public/calendar/widget.js','myvr'));
    myvr('calendar', {propertyKey:'861df70bdf81c3ed', showRates:true});
    </script>

    Something I am doing wrong? Thanks again for all your help. I did notice that the months that have gone by where rates are no longer displayed does show up correctly on mobile, so it is because the rate info being displayed doesn't allow the calendar to resize to mobile.

    Pins


  • MyVR Employee

    Hi,

    Your website builder might not allow @media queries in your CSS. If the website builder has a specific area for mobile CSS, you should be able to simply put

    .myvr-calendar-widget table.myvr-calendar-month td.month-cell {
    	font-size: 0px;
    }
    .myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
    	font-size: 18px;
    }
    

    in that section without the @media part. The CSS written above will always hide your rates. It's important that it's either wrapped in an @media query or put in a stylesheet that's only used for mobile devices to ensure that your website displays your rates in the calendar when possible.

    Best,
    Danny


Log in to reply
 

Looks like your connection to MyVR Community was lost, please wait while we try to reconnect.