-
calvin.bernalesAsked 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
Page URL: https://form.jotform.com/210320912744042 -
Richie JotForm SupportReplied 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.
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.
-
leblackteeReplied 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
-
roneetReplied 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.