- WordPress :6.1
- Statut : non résolu
- Ce sujet contient 5 réponses, 2 participants et a été mis à jour pour la dernière fois par
cyril054, le il y a 8 mois et 1 semaine.
-
AuteurMessages
-
7 mars 2023 à 16 h 45 min #2447554
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
7 mars 2023 à 21 h 30 min #2447593Salut, 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
8 mars 2023 à 5 h 57 min #2447642Bonjour 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.
8 mars 2023 à 9 h 18 min #2447659Salut, 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.
31 mars 2023 à 6 h 04 min #2450858Trè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.
3 avril 2023 à 22 h 56 min #2451239J’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.
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.