Ribbon Calendar on Mobile

Robin Smith
Oct 1, 2018 3:38 PM
Joined Sep, 2018 16 posts

Hi there! I've built a site in Wix, the Owner Rez widgets look great on the computer but the multi calendar "ribbon style" widget doesn't work correctly on a mobile device. I'll try to post a screen shot here... Does anyone know how to fix this?? Its super cramped up.. THANKS :)

Robin Smith
Oct 3, 2018 11:50 AM
Joined Sep, 2018 16 posts

Anyone have help for this please :)

Paul W
Oct 3, 2018 12:39 PM
OR Team Member Joined Jun, 2009 833 posts

Sorry for the delay in responding! Somehow this one slipped by. Do you have link to the page you're working on? I looked at your profile but couldn't find it on your website.

In general, our widgets are optimized for mobile/tablet displays. If you go to this page for instance:

https://www.shenrent.com/availability

And drop the width of your browser down to 3-4 inches, simulating a phone screen, you'll notice how the ribbon changes to a 1-15 day view and the font increases to use that space better. Scrolling to next/previous changes to 15 day chunks.

Robin Smith
Oct 3, 2018 12:45 PM
Joined Sep, 2018 16 posts

Thanks for the reply! Here is the site. I haven't linked the actual web address yet :) https://kristine343.wixsite.com/mysite-3 If you look at it on a mobile device and click the Clock icon to pull up the months it doesn't display it all!

Robin Smith
Oct 3, 2018 12:46 PM
Joined Sep, 2018 16 posts

Whoops I jumped ahead :), please notice I have two issues :). The widget being cramped and the clock icon not displaying the months :)

Paul W
Oct 3, 2018 1:09 PM
OR Team Member Joined Jun, 2009 833 posts

Ah it's a Wix website. There are a number of issues with Wix websites because of how they position/draw content in their pages. To make Wix work, you have to allocate enough space for the entire widget (including resizes or dropdowns).

So wherever you placed the ribbon widget, you need to give it a bigger "height" setting so that that section is larger and can accommodate the month/year selector opening.

Here's a picture to demonstrate what I mean... Right now, the section that you've put the widget in is allocating a max height to where that red line is. Set that section in Wix to have a bigger height so that the bottom of the widget (the red line) can expand more as necessary when the selector opens.

You might want to use the multi month widget instead, like this:

https://sasquatch.vacations/availability

Does all that make sense?

Robin Smith
Oct 3, 2018 2:53 PM
Joined Sep, 2018 16 posts

Thanks I tried this earlier and just tried it again. It's not working :(. What is the css, it talks about height "Customize advanced display and layout settings using Cascading Style Sheets (CSS) rules." Would this help? Also I noticed on the widgets your showing me (yours) you don't have the clock. Can I elect to not have the clock? That might fix it but I don't see that option! Thanks so much for your help!

Chris Hynes
Oct 5, 2018 7:16 PM
OR Team Member Joined Oct, 2012 1401 posts

The ones without the clock are the multi month calendar widgets -- the example has one of those for each property in addition to the ribbon calendar.

Either way, on Wix it's an absolute positioned layout so it won't adapt to any changes like the widget dropdown. If you make it a little bigger than needed, then the whitespace will give enough room for that calendar to drop down.

Robin Smith
Oct 6, 2018 11:40 AM
Joined Sep, 2018 16 posts

Thanks for all of the help. I've made it giant and it still doesn't work. The more I look at it and going to yours on my mobile... I think the issue is I have 4 homes and the clock icon, when opened, only opens as big as my four rows... so I added an "extra property" and sure enough it fully opens with the 5th row.

Robin Smith
Oct 8, 2018 5:30 PM
Joined Sep, 2018 16 posts

Chris Hynes said:

The ones without the clock are the multi month calendar widgets -- the example has one of those for each property in addition to the ribbon calendar.

Either way, on Wix it's an absolute positioned layout so it won't adapt to any changes like the widget dropdown. If you make it a little bigger than needed, then the whitespace will give enough room for that calendar to drop down.

HI Chris, I just wanted to make sure you saw my last comment. It looks to be an issue with 3 or less properties...
Thanks for all of the help. I've made it giant and it still doesn't work. The more I look at it and going to yours on my mobile... I think the issue is I have 4 homes and the clock icon, when opened, only opens as big as my four rows... so I added an "extra property" and sure enough it fully opens with the 5th row.

Paul W
Oct 9, 2018 12:44 PM
OR Team Member Joined Jun, 2009 833 posts

Hi Kristine,

Thanks for the continued feedback and details. We have identified a programmatic solution to this that should refresh the height when the date selector opens, however that won't be out right away. We need to work on that and test it to see if that works. This has been escalated to the dev team.

Robin Smith
Oct 9, 2018 12:48 PM
Joined Sep, 2018 16 posts

Thank you Paul :)!!!

Chris Hynes
Oct 10, 2018 11:41 AM
OR Team Member Joined Oct, 2012 1401 posts

This is now fixed. How's it look on your end?

Robin Smith
Oct 10, 2018 11:54 AM
Joined Sep, 2018 16 posts

Awesome! And just checked! Works great now! Thank you!!

Coldwell Banker
Jul 13, 2021 2:50 PM
Joined Apr, 2021 2 posts

i have the same problem on wordpress, how can i fix ?

please get back to me on this email
arturo_traslosheros@coldwellbanker.com.mx

https://www.cblacostarentals.com/

Joel P
Jul 13, 2021 3:51 PM
OR Team Member Joined Oct, 2009 135 posts

Hi Brock,

This is an old question which has long since been resolved. If you are struggling with our hosted sites or with our widgets on your own site, try opening emailing us at help@ownerreservations.com and we can look at your account directly. Be sure to email us from the account holder's email address or an address that has been granted admin access to the account in question.

Shelley S
May 4, 2022 12:04 PM
Joined Mar, 2022 28 posts

I've tried to do this too - but using the multi-month calendar, in mobile the dropdown button to select which property to view doesn't show? stardustretreat.com, see screenshot below. I have a Wix website.

Shelley S
May 4, 2022 12:07 PM
Joined Mar, 2022 28 posts

Single month calendar is same thing - the calendar shows fine, but there's no option to select which property you want to view. ???