Modifier apparence version mobile page archive des catégories

WordPress :5.4
Statut : non résolu

Ce sujet contient 3 réponses, 2 participants et a été mis à jour pour la dernière fois par jess6891, le il y a 4 années et 3 mois.

4 sujets de 1 à 4 (sur un total de 4)

Auteur

Messages
7 juin 2020 à 1 h 37 min #2345697

jess6891
Participant

Initié WordPress
11 contributions

Bonjour,

Avec un petit code trouvé sur le web j’ai pu obtenir d’avoir un affichage de mes catégories d’archives sur 5 colonnes. Depuis la version mobile, je souhaiterai un affichage sur deux colonnes au lien de une actuellement.

Est-ce que quelqu’un ici sait comment je pourrai faire cela ?

Merci d’avance 🙂

7 juin 2020 à 10 h 22 min #2345711

PhiLyon
Modérateur

Maître WordPress
28260 contributions

Bonjour.

Si ton petit code est modifiable, tu peux l’adapter aux mobiles en utilisant les media queries https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-le-responsive-design-avec-les-media-queries

🙂

11 juin 2020 à 13 h 40 min #2346090

jess6891
Participant

Initié WordPress
11 contributions

Bonjour,

Merci beaucoup, je vais faire des essais.

12 juin 2020 à 10 h 32 min #2346154
jess6891
Participant

Initié WordPress
11 contributions
Avec le premier code que j’ai trouvé, mes produits et sous-catégories s’affichent sur 4 colonnes sur les ordinateurs et pour les mobiles sur 2 colonnes pour les produits et 1 colonne pour les sous-catégories.

J’essaie donc de cibler ici les sous-catégories sur les téléphones pour qu’elles s’affichent également sur deux colonnes mais je me trouve bien empruntée…

Voici ce que j’ai essayé de faire en me basant sur le code que j’avais… Est-ce que je me trompe en écrivant « product-category » ?
```
/* Affichage des produits sur 4 colonnes */
.woocommerce ul.products li.product { width: 21% !important; margin: 2% !important; clear: none !important; } .woocommerce ul.products li.product:nth-child(4n+1) { clear: both !important; 
} 
@media only screen and (max-width: 981px) {
.woocommerce ul.product-category li.product-category { width: 21% !important; margin: 2% !important; clear: none !important; } .woocommerce ul.product-category li.product-category:nth-child(2n+1) { clear: both !important; }
}}
```
- Cette réponse a été modifiée le il y a 4 années et 3 mois par jess6891.
Auteur

Messages