À propos Forums Québec Web Forum WordPress en français Extensions WordPress HivePress : affichage des catégories sur 4 colonnes (au lieu de 3) Réponse à : HivePress : affichage des catégories sur 4 colonnes (au lieu de 3)

#389

Nicolas
Administrateur
Apprenti

La seule référence pertinente concernant le nombre de colonnes dans l’affichage des sous-catégories d’une catégorie trouvée sur les forums de HivePress est celle-ci : https://hivepress.io/support/topic/changing-listing-categories-column-amounts/

Le code CSS qu’y donne @ihor (développeur de HivePress) consiste à forcer l’affichage sur 1 colonne :

.hp-listing-categories .hp-grid__item {
    flex-basis: 100%;
    max-width: 100%;
}

Partons de cet exemple pour forcer l’affichage sur 4 colonnes, mais seulement à partir d’une certaine largeur de la zone d’affichage.

Vue « Sous-catégories » : règles CSS progressives

Les règles CSS contrôlant d’affichage en colonnes sont définies dans /wp-content/plugins/hivepress/assets/css/grid.min.css. Par défaut, l’affichage en colonnes est réduit à une seule colonne lorsque la largeur de l’écran est de 48em et moins. Cela est contrôlé par une règle @media. grid.min.css définit 3 points de rupture : 48em, 64em et 75em.

Nous allons donc définir une règle pour afficher les sous-catégories sur 4 colonnes (au lieu de 3) à partir de 64em, et on en profitera pour créer un affichage intermédiaire sur deux colonnes, entre 32em et 48em :

/* Catégories 4 colonnes */
@media only screen and (min-width:64em) {
  .hp-listing-categories .hp-grid__item {
    flex-basis: 25%;
    max-width: 25%;
  }
}
/* Catégories 2 colonnes */
@media only screen and (min-width:32em) and (max-width:48em) {
  .hp-listing-categories .hp-grid__item {
    flex-basis: 50%;
    max-width: 50%;
  }
}

C’est aussi simple que ça !