Image svg et png dans une colonne agrandit beaucoup trop la section

Français Discussions Questions et réponses sur des sujets techniques

Topic summary

Un utilisateur du thème Shopify “Origin” rencontre un problème d’affichage avec une section contenant 5 colonnes alternant texte et images (SVG/PNG). L’ajout d’images agrandit excessivement la section de plusieurs milliers de pixels.

Solution apportée :

  • Retirer le padding-bottom automatiquement ajouté dans le fichier liquid, ou le forcer avec !important
  • Appliquer du CSS à .media--adapt pour contrôler les dimensions (width: 100px, height: 40rem)
  • Modifier .multicolumn-card__image avec max-width: 100% et height: 100%

Ajustement mobile :
Pour éviter l’affichage vertical des images sur mobile, utiliser @media screen avec .multicolumn-card__image-wrapper (le suffixe -wrapper est crucial). Sans celui-ci, les images ne s’affichent pas et créent des zones vides.

Le problème est résolu avec cette combinaison de modifications CSS ciblant les conteneurs d’images et leurs parents.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Bonjour,
J’utilise actuellement le thème gratuit “Origin” sur ma boutique.
Sur ma page d’accueil, j’ai créé une section avec 5 colonnes : [texte] [image] [texte] [image] [texte]
Mes images séparent les blocs de texte.

Je procède :

  • Ajout d’une image svp ou png
  • Pour ajuster la taille de l’image j’insère le css suivant :


.multicolumn-card__image {
max-width: 100%;
height: 3%;
}

Problème :

La section “Multicolonne” s’allonge de plusieurs milliers de pixels vers le bas.

Remarque :

Dès que j’enlève les images, ma section reprend une taille correcte, adaptée aux blocs de texte.

Lien de mon site : https://b76ccc-4.myshopify.com/

J’aimerais vraiment pouvoir garder ces images entre mes colonnes. Avez vous une idée de la source du problème svp ?
Merci d’avance,
A disposition.

2

Bonjour,

1, Retire le padding-bottom que tu as ajouté dans ton fichier liquid.

pd botton css.png
pd botton css.png1925×973 125 KB

2,

Ajoute le CSS suivant au dernier parent de ton image, c’est-à-dire :

.media--adapt{
    width: 100px;
    height: 40rem;
}

3, Ensuite, modifie le CSS de ton code .multicolumn-card__image par :

.multicolumn-card__image{
max-width: 100%;
height: 100%;
}

Tu devrais obtenir ce résultat final

pb css.png
pb css.png1920×925 250 KB

N’hésite pas à poser d’autres questions. Merci.

1 Like
3

Hello,
Merci beaucoup @rochelin .

Quelques précisions tout de même si des gens rencontrent le même problème que moi.

Le padding-bottom s’ajoute automatiquement lorsque j’insère des images, alors j’ai imposé le padding à la section en utilisant "!important"pour que le css soit pris en compte (voir code ci-dessous).

Ensuite j’ai ajouté le css “.media–adapt” que tu m’as conseillé + l’amélioration de mon css pré-existant et tout est rentré dans l’ordre.

Je n’avais plus qu’à gérer l’affichage mobile parce que sinon mes images s’affichaient verticalement entre mes blocs de texte sur mobile. Alors j’ai ajouté le “@media screen” sur mes colonnes “.multicolumn-card__image-wrapper”. Le -wrapper est ultra important. S’il n’est pas mis cela indique que vous ne voulez pas afficher vos images. Ce qui fonctionne mais cela laisse des colonnes vides qui prennent le même espace sur mobile et font alors des grosses zone de “rien”. Le -wrapper ordonne de ne pas afficher les colonnes avec images elles-même et donc vos blocs de texte se retrouvent correctement les uns après les autres (voir code ci-dessous).

Merci encore @rochelin . Si tu as un peu de temps n’hésite pas à aller voir mes autres tickets :heart:

Bonne continuation.

.multicolumn-card__image {
  max-width: 100%;
  height: 100%;
}
h3 {
  font-size: 200%;
  font-weight: 700;
}
.button {
  opacity: 100%;
}
p {
  text-align: justify;
  text-justify: words;
}
.media--transparent {
  padding-bottom: 100px !important;
}
.media--adapt {
  width: 230px;
  height: 30rem;
}
@media screen and (max-width: 767px) {
  .multicolumn-card__image-wrapper {
    display: none;
  }
}