Modifier apparence version mobile page archive des catégories (Créer un compte)

  • WordPress :5.4
  • Statut : non résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #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 🙂

    #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

    🙂

    #2346090
    jess6891
    Participant
    Initié WordPress
    11 contributions

    Bonjour,

    Merci beaucoup, je vais faire des essais.

    #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 3 années et 11 mois par jess6891.
4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.