Affichage mobile 2 colonnes CSS

WordPress :6.1
Statut : non résolu

Ce sujet contient 3 réponses, 2 participants et a été mis à jour pour la dernière fois par momofr@free.fr, le il y a 3 semaines et 1 jour.

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

Auteur

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

Messages