Embedded Form: Product image not showing correctly in phone

When I click to the Product image, it shows like that. The white background is too long. I would like to make it small and adjust the opacity. Can someone help?

I preview it in mobile view in jotform, the white area is fine, but comes out like this.

Could you please try injecting custom CSS code into your form?

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

.overlay-content.has_thumbnail {

  width: 100%;

  height: 10%;

  top: 10%;

}

}

GUIDE: how-to-inject-custom-css-codes

Please try that and let us know how it goes.

still the same

Hello! Please allow me some time to look into this. I'll get back to you shortly.

Thank you!

Hello! Kindly note that Wix is overwriting the form code here, that is why the UI is not the same as JotForm provides by default. For example, please check direct link of your form on your mobile: https://www.jotform.com/203474796228465/, you won't face this spacing problem.

Anyways, please implement the following CSS code into your form using these instructions:

#productImageOverlay > div{

height: 40% !important;

}



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

.overlay-content .img-wrapper span{

  height: 140%;

  max-width: 140%;

  max-height: 140%;

}

}

After you implement this code, please clear your form cache as well.

Following is how the form should like like in Wix after implementing this code.

I hope this helps. In case you come across any issues, let us know.

Thank you!

In the Jot form Preview, The problem sovled.

However, Come back to Wix, When I using my phone to click the photo, problem still the same.

What should I do?

Hi Bakenjoyhk, to clarify, did you turn off your Clickable Image Preview?

Please kindly let us know if you still required assistance.

I tried all the code you provided, but still the same.

And I decided to disable the image preview.

Could you provide a code for me to delete the magnifier icon? Thanks for your effort.

Could you provide a code for me to delete the magnifier icon? 

You may use this code for that:

.image_zoom {

  background: none!important;

}

Regarding your last question, I have moved it to another ticket. I will address it shortly via this link: https://www.jotform.com/answers/2765646