Modifier le nombre de colonne en affichage blog selon le périphérique

[carabao]

Bonjour

A-t-il moyen de modifier dynamiquement le nombre de colonne (de 4 à 3 par exemple) en affichage BLOG lorsqu'on change de périphérique .

Mon idée était de compléter les règles mediaqueries existantes selon les périphériques (mobile, tablette....)

Est-ce possible ou faut-il s'y prendre autrement ?

Merci

[woluweb]

il suffit de jouer avec CSS Grid (ce que fait Cassiopeia)

[carabao]

Bonjour

Merci pour l'idée.



J'ai modifié les règles mediaqueries en ajoutant les règles suivantes pour l'affichage sur tablette en mode portrait (résolution minimum 950)

/* je force l'affichage en 2 colonnes malgré le réglage du blog en 4 colonnes */

.blog-items.masonry-4, .blog-items.columns-4 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1em;
}

/* largeur max site de 85 à 98% */
.container, .tck-container {
max-width: 98%;
}

Pour les autres périphériques (résolutions)

• téléphone portrait et paysage, pas de soucis les articles s'alignent l'un en dessous de l'autre.

ajout de la règle, optimisation de la largeur du site sur petit écran

/* largeur max site de 85 à 98% */
.container, .tck-container {
max-width: 98%;
}

• tablette (paysage) et ordinateur (paysage ), affichage normale articles sur 4 colonnes et deux lignes

Bonne solution ou pas ?

Merci