Problème Avec La Taille Des Gifs sur Jumpstart

[CedricLumo]

Hello!

Voici mon problème: certains Gifs uploadés sur ma page produit ne respectent pas la résolution que je leur donne, au contraire j'ai l'impression qu'ils veulent occuper tout l'écran.

- En version pour ordinateur: les gifs prennent prennent toute la place du coup on a un rendu hyperpixellisés et illisible

- En version mobile: les gifs prennent toute la place aussi mais sont cadrés par la largeur de l'écran de smartphone qui est plus petite que sur desktop

J'ai essayé de supprimer le Gif et de le réuploader mais j'ai le même problème.

J'ai essayé de générer un Gif différent mais ça n'a rien changé non plus.

Je n'ose pas toucher aux autres de gif de peur que le problème se répète 

Voilà la page produit:

https://lumocare.fr/products/traitement-led-phototherapie-photocanon

[Andriano]

Bonjour,

il faudra peut-être passer par le CSS pour régler la taille de vos gifs.

[Marie · Accepted solution]

Bonjour CedricLumo !

Ici Marie de l’équipe de Gourous chez Shopify.

Un grand merci d’avoir partagé l’URL de page produit ayant les GIF surdimensionnés. Après vérification de cette page, je remarque qu’il y a une image qui est surdimensionnée, mais ce n’est pas un GIF. Juste pour être certaine que nous parlons de la même chose. c’est bien cette image :

Si c’est le cas, j’ai regardé dans le code pour voir pourquoi celle-ci est surdimensionnée et pas les autres, avec l’outil d’inspection de Google Chrome. Il semble manquer la taille de l’image dans le code de cette image, tandis que les autres ont bien une taille d’indiquée.

Saviez-vous que vous pouvez aller dans le code de votre description de produit en cliquant sur cette icône :

Par la suite, je vous recommande de trouver le code :

<img alt="photos produit photocanon lumocare phototherapie" src="//cdn.shopify.com/s/files/1/0268/1077/7648/files/Couverture_9f583e47-8e43-4acf-8be7-3e6049da7f01_large.png?v=1569789078" style="float : none;" class="lazypreload">

Et dans le style="..." avant, le deuxième ", j’ajouterais ce code :

width:450px;display: block;

Pour qu’au finale ça donne ce code :

<img alt="photos produit photocanon lumocare phototherapie" src="//cdn.shopify.com/s/files/1/0268/1077/7648/files/Couverture_9f583e47-8e43-4acf-8be7-3e6049da7f01_large.png?v=1569789078" style="width:450px;display: block;" class="lazypreload">

Dites-moi si cela aide?

De plus, si vous voyez d’autres images dans cette page surdimensionner, je vous recommande de vider la cache de votre navigateur. Voici comment vider la cache de votre navigateur : http://www.viderlecache.fr/.

Cordialement,

[CedricLumo]

Bonjour Marie

Je vous remercie de votre aide en effet votre solution a marché pour la taille de l'image.

Cependant maintenant elle n'est plus alignée avec le reste du contenu de la description. J'imagine qu'il va falloir revenir dans le code html également mais je ne sais à quel niveau il faut agir.

Merci d'avance de votre aide!

EDIT: j'ai nettoyé le cache, et ça a l'air d'être revenu à la normale, merci!