How to make the images of the Product List widget square

Bonjour ,

J'ai modifie les dimensions de ce formulaire

https://form.jotform.com/233302667615354

Serait t'il possible de modifier les dimension des cadre entourant les photos pour les rendre "carré" et non "rectangulaire"?

Merci

Bonjour DigiCoppeConsulting,

Merci de contacter l'assistance Jotform. J'aurai besoin d'un peu de temps pour vous donner une solution avec des images carrées, je reviens vers vous aussitôt que possible.

Merci de votre patience et de votre compréhension, nous apprécions.

Cher DigiCoppeConsulting,

Merci de votre patience. Voici une solution qui injecte un code CSS dans le formulaire pour obtenir des images carrées avec la hauteur maximale possible du champ dédié aux images, laquelle est déjà optimisée, par défaut, pour l'affichage de l'ensemble de l'élément Liste de produits.

Le code CSS à injecter est le suivant:

.image_area.form-product-image-with-options {

  max-width: 172px;

  margin-left: 127px;

}

.form-product-item .p_image .image_area {

    margin-left: 33%;

}

Permettez-moi de vous montrer comment injecter ce code dans votre formulaire.

1. Dans le Générateur de formulaire, allez à la page Créer.
2. Cliquez sur le Rouleau de peinture.
3. Dans le panneau de droite, sélectionnez l'onglet Styles, et descendez jusqu'atteindre la section Injecter du CSS personnalisé.
4. Dans le champ Injecter du CSS personnalisé, insérer le code CSS ci-dessus.

Et voilà. Le résultat obtenu est le suivant:

Essayez, et dites-nous comment se passe.

N'hésitez pas à revenir vers nous si vous avez encore besoin d'aide.

Bonjour,

C'est déja pas mal mais c'était pas tout a fait ce que je voulais

Je voulais savoir s'il est possible de rendre carré l'encart qui contient la photo et pas uniquement la photo dans l'encart

Que cet encart soit carré pour voir plus la photo en hauteur

Merci

Bien cordialement

Hi DigiCoppeConsulting,

Thanks for getting back to us. Our French Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using DeepL, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, 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.

I appreciate you confirming what exactly you're trying to do but I'll need some to work on it. I'll reach out again as soon as I have an update.

We appreciate your patience and understanding.

Hello DigiCoppeConsulting,

Thanks for patiently waiting. You can use the CSS code below which is also a tiny bit responsive to all media devices:

/* Make the product images looks square on all devices */

.form-product-item .p_image, .image_area.form-product-image-with-options {

min-height: 450px !important;

max-height: unset !important;

}

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

.form-product-item .p_image, .image_area.form-product-image-with-options {

min-height: 330px !important;

}

}

Result:

You can also check this form. Note that the image containers are not perfectly square as you requested. Its width is dynamically calculated by the browser and we can't replicate that for its height so I came up with values that come close to making them looking like a square.

Reach out again if you need any other help.

Bonjour,

Merci ! c'est dans l'esprit de ce que je ovulais j'ai changé les valeurs car c'était un peu trop gros mais avec votre code j'ai compris comment faire !

Merci

Bonne journée