FROM CACHE - fr_header
RÉSOLU

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

WriteProject
Touriste
11 0 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.

1 SOLUTION APPROUVÉE

rochelin_
Shopify Partner
121 13 15

Succès.

Bonjour,

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

pd botton css.png

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

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

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.

Voir la solution dans l'envoi d'origine

2 RÉPONSES 2

rochelin_
Shopify Partner
121 13 15

Succès.

Bonjour,

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

pd botton css.png

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

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

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.
WriteProject
Touriste
11 0 1

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