Our form isn't showing correctly on smartphones

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). 

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:

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.

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.

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.