Mobile View: Logo Stretched and Field Spacing Issues

Our logo is way too stretched out in mobile view.

Also the spacing looks different as well. Is there a way to make the fields that are shrunk and on the same line to appear more together in mobile view?

Hi Angie,

Thank you for reaching out to Jotform Support. You can adjust the images size on mobile display by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

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

img {

  object-fit: contain;

}



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

width: 45% !important;

margin: 5px !important;

}

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved. 

Let us know if that works for you.