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 !!!
Affichage blog sur 2 colonnes sur smartphone ?
Réduire
X
-
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
Code PHP:
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-<?php echo $this->params->get('num_columns'); ?> g-4">
Pour connaître les classes :
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
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.
Prenez toutefois le soin de sauvegarder et de pouvoir revenir en arrière dans le cas d'une erreur.Dernière édition par daneel à 20/03/2023, 04h49
Laisser un commentaire:
-
Affichage blog sur 2 colonnes sur smartphone ?
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.
ManuelDernière édition par ManuelVoileux à 20/03/2023, 01h23Tags: Aucun
Annonce
Réduire
Aucune annonce pour le moment.
Laisser un commentaire: