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

[Surfers' Ridge]

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.

[Jenny Oest]

@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

[Surfers' Ridge]

@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>

[Jenny Oest]

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

[Danny Eiden]

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.

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;
	}
}

Cheers,
Danny

[Surfers' Ridge]

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!

[Surfers' Ridge]

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

[Danny Eiden]

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