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 !
Initié