How can I change the margin-top and margin-bottom of the form on mobile to see more of the background?

  • calvin.bernales
    Asked on February 3, 2021 at 5:09 AM

    Task 1.

    When looking at my form on mobile, there's no background showing. I would like to add some top and bottom margin but I can't get it to work with CSS. I would like for it to be similar on mobile and tablet to what it has on desktop version.

    Task 2.

    On mobile, the product image (tshirt) is cropped too much. How do I get the full height of the image? Thank you

    1612346834 601a75d2ef681 Screen Shot 202 Screenshot 10

    Jotform Thread 2870278 Screenshot
  • Richie JotForm Support
    Replied on February 3, 2021 at 7:12 AM

    Unfortunately, your task 1 cannot be achieved on mobile as you have set your background as your page image and not a form image.

    1612354293 601a92f560473 1 Screenshot 10

    On task 2, you may add this custom CSS in your form.

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

    .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area{

     min-height: 268px !important;

    }

    }

    Guide:https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know how it goes.

  • leblacktee
    Replied on February 3, 2021 at 8:12 PM

    Thank you very much @Richie_P. Task #2 worked. For Task #1, since the background image is set, can we add top margin to the form so that there's more space between the top of the page and the form to show more of the background?


    Thank you again

  • roneet
    Replied on February 3, 2021 at 11:58 PM

    Please inject this CSS to add a top margin to the form:

    @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-all {

    margin-left: 50px;

    margin-right: 50px;

    margin-top: 120px;

    }

    }

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know how it goes,

    Thanks.