Built by owners, for owners.

Ribbon Calendar on Mobile

Replies: 14 - Pages: 1 - Last Reply: Oct 10, 2018 11:54 AM by: Kristine Sapp
Kristine Sapp
Registered: 9/25/18
Ribbon Calendar on Mobile

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 :)

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

Anyone have help for this please :)

Paul W
Registered: 6/9/09
Re: Ribbon Calendar on Mobile

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.

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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!

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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

Paul W
Registered: 6/9/09
Re: Ribbon Calendar on Mobile

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?

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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
Registered: 10/19/12
Re: Ribbon Calendar on Mobile

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.

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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.

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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
Registered: 6/9/09
Re: Ribbon Calendar on Mobile

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.

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

Thank you Paul :)!!!

Chris Hynes
Registered: 10/19/12
Re: Ribbon Calendar on Mobile

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

Kristine Sapp
Registered: 9/25/18
Re: Ribbon Calendar on Mobile

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

Pages: 1