Comment donner la même hauteur à toutes les cartes ?

Liens en vedette

1. Documentation de Company XYZ sur le CSS personnalisé
2. Documentation Shopify sur l’ajout de CSS personnalisé à votre thème
3. Documentation Shopify sur l’éditeur de thème

Donnez une apparence plus uniforme aux cartes d’une même ligne en étirant chaque carte sur toute la hauteur de cette ligne. En attendant que des paramètres dédiés soient disponibles, ajoutez un petit extrait de CSS au paramètre Custom CSS de la section. Pour obtenir des instructions de configuration, consultez la documentation Shopify sur l’ajout de CSS personnalisé à votre thème

Donner la même hauteur aux cartes

1. Dans l’éditeur de thème, sélectionnez la section que vous souhaitez modifier. Pour obtenir une présentation générale, consultez la documentation Shopify sur l’éditeur de thème

2. Faites défiler la section des paramètres jusqu’en bas et ouvrez Custom CSS.

3. Collez le CSS suivant :

   .card {
     height: 100%;
   }

4. Enregistrez vos modifications.

Positionner le texte des cartes sous les images

Par défaut, le texte d’une carte peut être ancré en bas d’une carte de hauteur uniforme. Pour placer le texte directement sous l’image, ajoutez également ce CSS :

.card__content {
  justify-content: flex-start;
}

Notes d’utilisation

1. Appliquez le CSS à chaque section. Ajoutez le code à chaque section dans laquelle vous souhaitez que les cartes aient la même hauteur.
2. Choisissez intentionnellement l’alignement du texte. Ajoutez le deuxième extrait uniquement lorsque vous souhaitez que le texte de la carte commence directement sous son image.
3. Enregistrez avant de prévisualiser. Enregistrez vos modifications, puis vérifiez la section pour confirmer que la mise en page des cartes vous convient.