Embedded Form: Product image not showing correctly in phone

  • Profile Image
    Bakenjoyhk
    Asked on December 14, 2020 at 12:13 AM

    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.


    1607921639_5fd6efe779061_WhatsApp Image

  • Profile Image
    JohnRex
    Answered on December 14, 2020 at 03:50 AM

    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.

  • Profile Image
    Bakenjoyhk
    Answered on December 14, 2020 at 07:36 AM

    still the same

  • Profile Image
    Patrick_R
    Answered on December 14, 2020 at 08:27 AM

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

    Thank you!

  • Profile Image
    Patrick_R
    Answered on December 14, 2020 at 08:57 AM

    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.

    1607954238_5fd76f3e45e7c_Screencast 2020

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

    Thank you!

  • Profile Image
    Bakenjoyhk
    Answered on December 14, 2020 at 10:11 AM

    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?

  • Profile Image
    Jessica_H
    Answered on December 14, 2020 at 11:11 AM

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

    1607962217_5fd78e69b3226_

    Please kindly let us know if you still required assistance.

  • Profile Image
    Bakenjoyhk
    Answered on December 14, 2020 at 12:13 PM

    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.1607965967_5fd79d0fac254_1234567.png

  • Profile Image
    JohnRex
    Answered on December 14, 2020 at 02:21 PM

    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