Layout issues on embedded form

  • rtolmach
    Asked on December 13, 2017 at 3:50 PM

    Hi Jotform

     

    I have used survey monkey and wufoo for years. Just discovered jotform. Awesome!!!!

     

    A bit of a problem with my first form, though.

     

    Here is the form, looking good:

    https://www.jotform.com/build/73466233484158

    https://www.jotform.com/build/73466233484158#preview

     

    However, see this iframe embed of the form:

    https://fanatics-books.myshopify.com/pages/home-4b

     

    Two differences:

    note that the nice submit button becomes a giant in the embed

    worse than that, notice how the 'other' field next to the checkbox is out of position

     

    I attached a screen grab that shows two Chrome windows (oh, yeah, I should have mentioned I am on Chrome and PC desktop) side by side. 

    Thanks!
    Robert



    Jotform Thread 1322526 Screenshot
    Page URL: https://fanatics-books.myshopify.com/pages/home-4b
  • Mike
    Replied on December 13, 2017 at 5:17 PM

    Thank you for contacting us.

    The issue was caused by mobile form styles. I have added the next styles to your form in order to fix the 'other' input and the submit button size.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .form-buttons-wrapper button {
    max-width: 115px !important;
    }
    .form-checkbox-other-input {
    width: 115px !important;
    }
    }

    Layout issues on embedded form Image 1 Screenshot 20

    Please re-check the form.