Appoinments+ Not fitting my mobile view

Okay, so the appointment page isn't fitting onto a mobile view. I have searched a bunch to find solutions, but I don't understand CSS and all of the solutions seem very custom for each person/website.
Will you please help me find a solution to get all of the fields (service, calendar, etc.) to show up on a mobile device.
http://learnaccordion.org/store/products/appointment/
Thanks,
Dallas

  • Vinod Dalvi

    Hi Dallas,

    Welcome to the WPMU Dev community and thank you for your question.

    Yes you are right the custom CSS solution provided are specific to the themes so it won't work for others who are using another theme. This CSS issue occurs because the theme overwrites the appointment CSS resulting in breaking the responsiveness of it.

    I have developed the specific CSS code for your site to resolve the issue.

    Add the following code in the style.css file of your child theme or add it in the Appointment Additional css Rules option displayed on the following path.

    Admin Area -> Appointments -> Settings -> General -> Display Settings -> Appointment Additional css Rule

    @media screen and (max-width: 700px) {
    	#content-box table > tbody > tr > td{
    	clear: both;
    	display: block;
    }
    
    #content-box .appointments-list table > tbody > tr > td,
    #content-box .appointments-legend table > tbody > tr > td,
    #content-box .appointments-my-appointments table > tbody > tr > td{
    	display: table-cell;
    }
    }

    After using the above CSS code please clear your browser cache to test it.

    Best Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Dallas,

    Thank you for your reply.

    It seems you are changing the theme on your site therefore the theme specific CSS provided in my previous reply is not working with your new theme.

    Could you please try using the following CSS code which is more gneric?

    @media screen and (max-width: 700px) {
    body.page-id-4611 table > tbody > tr > td{
    	clear: both;
    	display: block;
    }
    .appointments-list table > tbody > tr > td,
    .appointments-legend table > tbody > tr > td,
    .appointments-my-appointments table > tbody > tr > td{
    	display: table-cell !important;
    }
    }
    @media screen and (max-width: 360px) {
        .app_monthly_schedule_wrapper table{
            max-width: 90%;
        }
    }

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Dallas,

    Actually the output displayed by the appointment shortcodes are responsive by default but if you use these shortcodes in any HTML tags then it becomes unresponsive and we have to develop custom CSS code to make it responsive again which happened in your case.

    As you are comfortable with not using shortcodes in any HTML markup then i should have suggested you first of all not to use the shortcodes in any HTML markup :slight_smile:

    Cheers,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.