Remember me

Calander Not fully showing mobile

6 years 7 months ago #1

  • shane's Avatar
  • shane
  • Posts: 30
Hello, love the module, but have noticed on my websites i found calander not showing fully on mobile (samsung s5). actually seems like not showing properly on any mobile devices fully. As Saturday Sunday cant really be seen.

I did try to alter css but it is too hard for me, and alot of !important attributes.

if its possible i want to just simply reduce the width so its AUTO for that media query but it is not doing that though coded as such probably.

attached are 2 screen shots of similar issues (using desktop with reduced width on browser, but does same thing on mobile. I will have to make this alteration on at least 3 websites now so i hope goes ok.

links..

www.jinderamuseum.com.au/tours/group-bookings

www.yvettegoodwin.com.au/contact/book-consultation




an additional screenshot from Mobile Test Me
Attachments:

6 years 7 months ago #2

  • shane's Avatar
  • shane
  • Posts: 30
just wanting to also follow up here, that your own website is showing same functionality issue. also adding that in horizontal view you are unable to see whole calander as well as not scroll to the other area using touch, on touch it is static not allowing swipe to see rest of it. and touching scrolll elsewhere makes calander lose focus and disappear.

seems like some resizing needs to be reworked in media queries, look forward to fix up soon guys.



6 years 7 months ago #3

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need at the custom css file of your template add CSS code:
@media (max-width: 480px) {        
    .calendar,
    .calendar table {
        font-size: 10px;
    }

    body .calendar {
        width: auto !important;
    }

    body .calendar .daysrow .day,
    body .calendar thead .headrow,
    body .calendar .daynames {
        line-height: 1.2em !important;
        padding: .5em !important;
        word-break: normal;
    }

    body .calendar .daysrow .day,
    body .calendar thead .headrow,
    body .calendar .daynames,
    body .calendar .daysrow .day {
        font-size: 1em !important;
    }

    body .calendar thead td.title:after {
        box-sizing: border-box;
        height: 93px;
        width: 100% !important;
    }

    .calendar thead .name, 
    .calendar .daysrow .day.wn {
        word-break: normal;
    }
}

Regards,
Vyacheslav, Balbooa.com

6 years 7 months ago #4

  • shane's Avatar
  • shane
  • Posts: 30
Well done, I had got as far as reducing font size to 10 px and knew i would have to look at using EM somewhere

I'm glad i put it aside and waited for the excellent support as always.

I imagine this is something that will come in an update/patch later? or should I go ahead and add custom css to this effect to all other websites where I am using the form with date picker now?

6 years 7 months ago #5

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
This change will be added to the updates, but when the next update comes out, it's hard to say for the time being
We recommend that you add this code for all your sites that need it

Regards,
Vyacheslav, Balbooa.com

6 years 7 months ago #6

  • shane's Avatar
  • shane
  • Posts: 30
No problem at all, thanks for the heads up, easy copy and paste fix for me.

6 years 7 months ago #7

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
You are welcome ;)
Powered by Kunena Forum