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

  • Profile Image
    calvin.bernales
    Asked on February 03, 2021 at 05: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

  • Profile Image
    Richie_P
    Answered on February 03, 2021 at 07: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.png

    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.

  • Profile Image
    leblacktee
    Answered on February 03, 2021 at 08: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

  • Profile Image
    roneet
    Answered on February 03, 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.