Appointments+ [app_login] not mobile responsive

my problem:

the [app_login] area of the Appointments+ plugin is not mobile responsive - can someone please help?

here's the site to review on iPhone:
http://funfitfactory.com/book-a-class

once you book a time, the name, email address & phone fields fall off the page - i want it to be responsive like the rest.

i tried removing the tables here and no luck:
http://funfitfactory.com/dev-class

please help - thx very much in advance!

  • Paul
    • WPMU DEV Initiate

    cool - thx

    here's a quick tip for developing for the mobile experience - go to the bottom right-hand corner of any browser and drag it to the left ... all mobile responsive sites will re-size as you reduce the width - pretty cool huh? this is an easy way to check your site on different devices

  • Jaime
    • WPMU DEV Initiate

    Hey Paul,

    On the dev-class link above, you go the appointments+ calendar and forms to resize down perfectly for any screen size.

    Please, I beg you, tell us what you did. Pretty please? :slight_smile:

    Sincerely,

    Jaime

  • Paul
    • WPMU DEV Initiate

    Hi there Jaime

    Below is what I have added to the additional CSS Rules field. Hope that helps. I'm using the responsive theme METRO from studiopress.com too.

    .entry-content td {border:none;width:75%}

    a.appointments-login_link-cancel, .app_submit_btn {
    color: #4e4d4d;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    background-color: #08a2ac;
    background-repeat: no-repeat;
    font-family: Helvetica Neue, Helvetica, Arial;
    background: #08a2ac;
    padding: 6px 14px 6px;
    line-height: normal;
    border: 1px solid #e3e3e3;
    border-bottom-color: #d1d1d1;
    border-radius: 3px;

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);

    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;

    text-decoration:none;
    }

    .app_workers_dropdown_select select { margin-right: 1em; font-family: helvetica,arial; font-size:1em; }

    .appointments-confirmation-button {
    white-space: normal;
    }

    .entry-content td {
    border: medium none;
    width: 0%;
    }

  • Jaime
    • WPMU DEV Initiate

    Oh man... thanks so much! I hope that will help. I'll be trying it out on my site see if it works.

    I didn't know you had posted since the system didn't notify me, but I'm glad I cam looking for an answer.

    Thanks again!

    Jaime

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.