APPOINTMENT DETAILS NOT RESPONSIVE - APPOINTMENTS +

I tried to set the width 100% for almost every element in that section but nothing really changes can you help me which class do i need to set to 100% to make this responsive?

Here are my css changes

.appointments-confirmation-buttons, .appointments-confirmation-button,.appointments-confirmation-cancel-button,.appointments-confirmation-wrapper span {clear:both;width: 100%;}
.appointments-confirmation-wrapper, .su-spoiler, .appointments-confirmation-wrapper fieldset, .appointments-confirmation-wrapper fieldset legend,.appointments-confirmation-wrapper label,.appointments-confirmation-wrapper fieldset div, .appointments-confirmation-wrapper fieldset div label, .appointments-confirmation-wrapper fieldset  div  {clear:both;width: 100%;overflow:hidden;box-sizing: border-box}

Access the page here http://englishmilestones.com/appointments-pay-as-you-go/

  • Predrag Dubajic
    • Support

    Hey @Carissa Simmons,

    Hope you're doing well today :slight_smile:

    I have checked your appointment page and when I resized my window and refreshed the page the form was not there any more.
    Are you currently making some changes on your site, did you remove appointments shortcode from that page?

    Please advise.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Carissa,

    Well, the form shouldn't disappear like that, and actually I didn't see this happen on any other installation, could be your theme or accordion element you are using.
    If you continue to have this issue I would suggest opening new thread so we can deal with the issues separately.

    As for the responsive issue, it looks like you have min-width attribute for fieldset set somewhere so applying this CSS code for smaller resolutions should do the trick:

    .appointments-confirmation-wrapper fieldset {
        min-width: auto;
    }

    Best regards,
    Predrag

  • Louis
    • New Recruit

    I am trying to get the appointment details section to become mobile responsive. Putting the min-width on auto fix (above) works, but the button that says "please click here to confirm this appointment" runs off the screen for mobile in portrait.

  • Patrick
    • Support Monkey

    Hiya Louis Happy New Year! :smiley:

    Hmm, what theme are you using on your site? I just tested with multiple themes and everything inside <div class="appointments-wrapper"> resizes fluidly on smaller screens.

    However, you can try with the following CSS to force the longer line of text in your button to break onto 2 lines on really small screens:

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

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.