Reduce the white border of the product image when enlarged after clicking

  • Hochwimmer
    Gefragt am 25. Januar 2024 um 13:32
    Es soll beim Klick auf das Bild des Weines der Wein größer angezeigt werden, allerdings soll die Weißfläche kleiner gemacht werden (rechts & links zuschneiden) - Wie kann ich das durchführen?
  • Carrissa_M
    Geantwortet am 25. Januar 2024 um 14:04

    Hi Johannes,

    Thanks for reaching out to Jotform Support. I will be needing more time to test and see if this is possible to change by injecting CSS.

    We really appreciate your patience and understanding while we’re looking into this.

  • Mike_G Jotform Support
    Geantwortet am 25. Januar 2024 um 15:33

    Hi Johannes,

    Thanks for your patience and understanding, we appreciate it. Unfortunately, our German Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Reducing the white border of the product image when enlarged after clicking it is possible with the help of custom CSS codes. Let me show you how to do it:

    1. Copy the CSS codes below:

    .overlay-content .img-wrapper {
        margin: 0px !important;
    }
    .overlay-content {
        padding: 60px 0px 0px !important;
        width: 10% !important;
    }

    2. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. In the Form Designer menu, click on the Styles tab, scroll down, and paste the custom CSS codes into the Inject Custom CSS box.

    4. Close the Form Designer menu to save the changes.

    Reduce the white border of the product image when enlarged after clicking Image 1 Screenshot 30

    And that's it. Check out the screenshot below to see the result:

    Reduce the white border of the product image when enlarged after clicking Image 2 Screenshot 41

    I've cloned your form and made the necessary adjustments so you can test it before applying the changes to yours. You can find my cloned form here. Feel free to clone my form to your account so you can inspect it. Click here to see how to clone the form. Also, check out our guide explaining how to inject custom CSS codes into your form.

    Give it a try, and reach out again if you have any other questions.