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

  • WordPress :6.1
  • Statut : non résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #2447554
    cyril054
    Participant
    Initié WordPress
    13 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
    6460 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
    13 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 9 mois par cyril054.
    #2447659
    momofr@free.fr
    Modérateur
    Maître WordPress
    6460 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.

    #2450858
    cyril054
    Participant
    Initié WordPress
    13 contributions

    Très bien merci 🙂

    J’ai essayé mais je suis pas encore tout à fait au point…

    Je viens de me faire disputer par google car  »

    Principaux problèmes

    • Texte illisible, car trop petit
    • Éléments cliquables trop rapprochés
    • Contenu plus large que l’écran »

    En effet j’ai encore deux petit soucis…

    Quand on regarde la page d’accueil en version mobile, il y a le slider qui dépasse ainsi que mon calendrier et aparament google n’aime pas trop du coup (d’ailleurs moi non plus)

    Possible de me donner encore un petit coup de pouce svp ?

    Si jamais vous avez des conseils d’optimisation pour mon affichage en version mobile, je suis preneur avec plaisir !

    Merci sincèrement !

    Cyril

    • Cette réponse a été modifiée le il y a 8 mois et 1 semaine par cyril054.
    #2451239
    cyril054
    Participant
    Initié WordPress
    13 contributions

    J’ai réussi pour le slider en faisant :

    @media (max-width: 748px) {
    .metaslider {
    position: relative;
    z-index: 0;
    width: 75%;
    }
    }

    Par contre pour le calendrier je coince encore…

    • Cette réponse a été modifiée le il y a 8 mois et 1 semaine par cyril054.
6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.