Affichage mobile 2 colonnes CSS (Créer un compte)

  • WordPress :6.1
  • Statut : non résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #2447554
    cyril054
    Participant
    Initié WordPress
    11 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : php 8
    • Thème utilisé : Responsive
    • Extensions en place :
    • Nom de l’hébergeur : lws
    • Adresse du site : https://pokestock.fr/accueil

    Problème(s) rencontré(s) :

    Tout d’abors bonjour à tous et un grand merci à ceux qui prendrons le temps de m’aider,

    Voici le soucis, j’aimerais lorsque mon site est en version mobile que l’affichage de la rubrique nouveauté soit en 2 colonnes à la place que les articles soient les uns sous les autres.

    Après avoir effectué quelques recherches j’ai cru comprendre que c’était possible via un code CSS du style :

    @media all and (min-width: 0px) and (max-width: 760px) {

    .CLASSE A METTRE EN DEUX COLONES {

    width:48% !important;

    margin:1%;}

    }

    Du coup j’ai inspecter ma page pour essayer de trouver ça correspondait à quelle classe et j’ai essayé avec le code suivant :

    @media all and (min-width: 0px) and (max-width: 760px) {

    .is-vertical is-layout-flex wp-container-8 wp-block-group {

    width:48% !important;

    margin:1%;}

    }

    Mais ça ne fonctionne pas ????

    Est-ce qu’un pro du css peut jetter un petit coup d’oeil et m’expliquer ce qui cloche ?

    Merci à vous pour le temps accorder à ma demande.

    Cyril

    #2447593
    momofr@free.fr
    Modérateur
    Maître WordPress
    5651 contributions

    Salut, essaye avec cette règle CSS :

    @media (max-width: 748px) {
    .wp-block-post-template.is-flex-container li {
    width: calc(50% - .9375em) !important;
    }
    }

    Je l’ai reprise d’un réglage intermédiaire déjà présent dans tes styles CSS.

    A mettre dans : Apparence -> Personnaliser -> CSS additionnelle

    #2447642
    cyril054
    Participant
    Initié WordPress
    11 contributions

    Bonjour Momofr,

    C’est impeccable, ça marche parfaitement.

    Est-ce que tu pourrais m’expliquer comment à tu trouvé :

    .wp-block-post-template.is-flex-container li

    Ça pourrait sûrement m’aider de comprendre si jamais je veux modifier d’autres choses en passant par le css ????

    Merci beaucoup en tout cas.

    Bonne journée.

    Cyril

    • Cette réponse a été modifiée le il y a 3 semaines et 1 jour par cyril054.
    #2447659
    momofr@free.fr
    Modérateur
    Maître WordPress
    5651 contributions

    Salut, pour trouver les astuces CSS tu dois utiliser l’inspecteur web de ton navigateur, ici j’utilise Firefox.

    J’ai pointé sur un produit et avec clic droit j’ai demandé l’inspecteur qui est venu se positionner dans le code sur l’élément survolé.

    Dans la grille 4 colonnes j’ai trouvé la largeur calculée (attribut width avec calc()), sur 4 colonnes, est à calc(25% – .9375em).

    J’ai donc mis 50% et encapsulé la règle dans une media queries responsive pour les petits écrans (max 748px).

    Petite vidéo sur comment se servir d’un inspecteur web.

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.