How to adjust product image size in mobile?

I designed my form page and when I try to check it on mobile, the product images are cut off at the top

https://www.jotform.com/241493253595160

Here is the form link

Hi Christianah,

Thanks for reaching out to Jotform Support. I have created a custom CSS code and remove some existing CSS code that is in conflict with the custom CSS code that I have made as provided below.

.form-product-details {

  display: none !important;

}



.form-line-active {

  background-color: #ffffff !important;

}



/*Adjust product image height in mobile - 16448861*/

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

  .p_image {

    height: 250px !important;

  }

  .image_area {

    max-height: 250px !important;

  }

}

/*Code ends here*/

Here's how to do it:

1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Replace all CSS code with the provided CSS code.



Result:

Give it a try and let us know how it goes.

This is how it is showing now on descktop and
Also on mobile, images are not loading too

Hi Christianah,

I checked your form on my end and it seems that the CSS code provided by my colleague worked. The images are not cut and it was not changed with the layout you recently sent. Check out the image below:

Can you try checking the form again and let us know if the issue happens again? I also cleared your form cache as a precaution. We also have a guide on How to Clear Your Form Caches that you can check.

Give it a try and let us know how it goes.

The content is not showing, but the images are showing already

Hi Christianah,

Can you clarify which content are you referring to? You can share some screenshots for us to see the issue from your perspective. Meantime, I also checked your form on mobile and can see both the images and description are showing correctly.

Once we hear back from you, we'll have a better idea of what's going on and how to help.