Our form isn't showing correctly on smartphones

  • Profile Image
    SeaShepherdGlobal
    Asked on February 07, 2018 at 06:21 AM

    Hello,

    We're having problems with this application form: https://form.jotformeu.com/73173702103344

    On smartphones the image at the top is cropped (instead of resized) and the reservation calendar is also cut off (or, when embedded in i-Frame on our site, doesn't show at all). 

  • Profile Image
    Adrian
    Answered on February 07, 2018 at 09:08 AM

    I have added the following CSS to fix the image on mobile devices.

    @media (max-width: 650px) {

      .form-all {

        margin-top: 200px !important;

        margin-left: auto !important;

        margin-right: auto !important;

      }

      .form-all:before {

        height: 200px;

        background-size: contain;

        left: 0;

        right: 0;

        margin: auto;

        background-position: center;

        background-repeat: no-repeat;

        top: -200px;

      }

    }

    Here is how your form looks now:

    1518012387Tattoo_Application_Form.png

    Can you please give us the URL of the website your form is embedded to? You might want to make some changes to the website to fix the calendar being cropped.


    Thank you.

  • Profile Image
    SeaShepherdGlobal
    Answered on February 07, 2018 at 09:32 AM

    Thanks! This is the URL for the website page it's on: https://www.seashepherd.nl/our-campaigns/tattoo/

    The image looks okay now, but last day in calendar is still cut off when looking at it embedded on our site.

    We have a plug in to embed using i-Frame.

  • Profile Image
    Mike_G
    Answered on February 07, 2018 at 10:44 AM

    Did you just change the "Date reservation" field in your form to a Short Text Entry field? If possible, can you change it back to what it was so we can see the issue on our end, please?

    We will wait for your response.