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

[WriteProject]

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.

[rochelin_ · Accepted solution]

Bonjour,

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

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

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

[WriteProject]

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 ❤️

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;
  }
}