What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to stop background image being cut off on mobile

    Asked by iAssist on May 06, 2017 at 11:37 PM

    Hi team

    I have created an optin page https://form.jotform.co/71242195992866

    When I view the page on mobile the image is cut off (however on the Jotform Preview page it shows as covering the screen)

    Can you please advise how I can have the image cover the full screen on mobile devices?

    Thank you

    Page URL:
    https://form.jotform.co/71242195992866

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 07, 2017 at 12:07 AM

    Please try to add the following CSS codes to your form and see if that would fix the issue you're having in your mobile device.

    @media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

        .supernova {

            background-attachment: fixed !important;

        }

    }

    How-to-Inject-Custom-CSS-Codes

    Thank you.

  • Profile Image

    Answered by iAssist on May 07, 2017 at 11:00 PM

    Thank you for your response ... unfortunately this has not made any difference :(

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 08, 2017 at 03:11 AM

    Please remove the code provided by my colleague earlier and copy and paste the below one:

    .supernova {

            background-repeat: no-repeat;

            background-attachment: fixed;

     

        }

    @media screen and (max-width: 480px){

        .supernova {

            background-image : url("https://www.jotform.com/uploads/iAssist/form_files/Island%20cropped.295.jpg");

            background-size : cover;

            height : 100%;

            overflow : hidden;

        }

        body {

            height : 100%;

            overflow : scroll;

            -webkit-overflow-scrolling : touch;

        }

    }

    I tested and that should work as intended.

    Please let us know how it worked.

    Thank you!

  • Profile Image

    Answered by iAssist on May 08, 2017 at 11:30 AM

    Thank you! That worked perfectly!!

    Ever so grateful :D