[RÉGLÉ] Affichage blog sur 2 colonnes sur smartphone ?

[ManuelVoileux]

Bonjour tout le monde,
J'utilise joomla 4.2.9, avec le template cassiopeia, et l'affichage cards de Brian Teeman sur github - signalé sur le forum par - daneel . En affichage blog je voudrais 2 colonnes sur smartphone et 3 sur smartphone horizontal, puis 4 à partir de la taille tablette.

En utilisant l'inspecteur firefox, je vois que la class de la div est
row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4

lorsque avec l'inspecteur, je modifie en
row row-cols-2 row-cols-sm-3 row-cols-md-3 row-cols-lg-4 g-4

j'obtiens l'affichage que je souhaite avec 2 colonnes en affichage blog sur smartphone, 3 sur smartphone horizontal et 4 à partir de la taille tablette, en utilisant le simulateur de changement d'écran de firefox.

Par contre je suis incapable d'identifier le conteneur auquel s'applique cette classe (main ? container-component ?) et comment écrire le bout de css à mettre dans mon user.css.

Merci de votre aide.

Manuel

[daneel]

Bonsoir,

Rapidement, le lien de menu contient un paramètre num_columns (nombre de colonne) correspondant à row-cols-lg- (992px - large ).

On retrouve ce paramètre ainsi que les autres classes de la div en question à la ligne 78 du fichier cards.php

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-<?php echo $this->params->get('num_columns'); ?> g-4">

https://github.com/brianteeman/joomla-cards/blob/main/cards/card.php

Pour connaître les classes :

https://getbootstrap.com/docs/5.2/layout/grid/#row-columns

Les six niveaux de grille bootstrap sont les suivants :

Très petit = Extra small (xs) 0
Petit = Small (sm) 576px
Moyen = Medium (md) 768px
Grand = Large (lg) 992px
Très grand = Extra large (xl) 1200px
Très très grand = Extra extra large (xxl) 1400px

Comme indiqué dans la documentation :

Utilisez les classes responsive .row-cols-* pour définir rapidement le nombre de colonnes qui correspond le mieux à votre contenu et à votre mise en page. Alors que les classes .col-* normales s'appliquent aux colonnes individuelles (par exemple, .col-md-4), les classes .row-cols-* sont définies sur le parent .row en guise de raccourci. Avec .row-cols-auto, vous pouvez donner aux colonnes leur largeur calculé automatiquement.

note : vu que brian n'a pas défini de serveur de mise à jour, les modifications apportées ne seront pas écrasées sauf à réinstaller les fichiers d'origine.
Prenez toutefois le soin de sauvegarder et de pouvoir revenir en arrière dans le cas d'une erreur.

[ManuelVoileux]

Bonjour,
merci beaucoup pour cette réponse très rapide. Je vais essayer.
C'est bon !
modifier les fichiers php m'inqiète toujours un peu , mais je vais garder soigneusement un original, et commenter la modif. Merci !!!