Affichage mobile 2 colonnes CSS

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.

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

Auteur

Messages
7 mars 2023 à 16 h 45 min #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
7 mars 2023 à 21 h 30 min #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
8 mars 2023 à 5 h 57 min #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.
8 mars 2023 à 9 h 18 min #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.

31 mars 2023 à 6 h 04 min #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.
3 avril 2023 à 22 h 56 min #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.
Auteur

Messages