My Appointments Shortcode in mobile view

The shortcode for My Appointments is great on desktop view but for mobile it doesn't wrap around, instead there is more white space for other sections.
Here below the image you can see My Appointment stretches farther than mobile view site.

And then here below extra white space

And so I tried again without the divi builder page and it still doesn't wrap around but you can not scroll to the right even though it stretches farther than the mobile site view.

Is there a way to wrap around?

  • Sajid
    • DEV MAN’s Sidekick

    Hi Elizxer,
    Hope you are doing good today :slight_smile:

    Its responsive by default and works fine on mobile devices too. Did you tried using a default WordPress theme like TwentySixteen or TwentyFifteen ?

    Also, if you could share the link of page where I can see this issue and try to figure out why its not wrapping.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • Nastia
    • Support Rock Star

    Hello Elizxer

    I hope you are doing well today!

    I've checked your site and the calendar looks good on a mobile screen. Please see the screenshot:

    As for "My Appointments" table, I couldn't find any page on your site with my-appointments shortcode in it. Would you please post it here.

    Also, let me know on what mobile device you are viewing your site?

    Please advise,

    Cheers,
    Nastia

  • Elizxer
    • Site Builder, Child of Zeus

    Check again, and this time you will have two appointments in MY APPOINTMENTS.
    Everything will be wrapped in mobile site except for MY APPOINTMENTS.
    rexzile.com/request-web/ Log In in mobile and let me know if it looks good.

    Also since you registered and request for the service. I like to ask you if you ever get a confirmation email? I set it to NO for Send Confirmation email but I did (Re)send confirmation email

    If you didn't then this is the problem I still have. If I set it to YES.
    It will send the email confirmation automatically before I approve it, which makes it odd.

    Thanks

  • Nastia
    • Support Rock Star

    Hello Elizxer

    I trust all is well!

    Please try the following CSS code to make the table responsive:

    @media screen and (max-width: 429px) {
    	.appointments-my-appointments table th {
    	    font-size: 11px;
    	}
    	.my-appointments.tablesorter {
                     order-collapse: collapse;
    		width:100%;
    		overflow-x: auto;
    		display: block;
    	}
    }

    Install the Simple Custom CSS plugin. plugin and add this code inside the CSS editor.

    I hope this helps!

    Cheers,
    Nastia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.