Discussion :

[ndiayebirame]

Bonjour
Je voudrais de l'aide s'il vous plaît pour l'emplacement de mes images en version mobile je m'explique

Sur ma version mobile l'affichage proposé par mon thème ne me satisfait par du coup j'ai modifié le Css pour l'adapter à mes attentes
cependant j'ai un souci au début j'avais fait ce code

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
@media screen and (max-width: 767px) {
 
	    .cont {
				position:relative;
		display: grid;
    grid-template-columns: 				repeat(2, 1fr); 
    grid-gap: 10px; 
 
     }
}

qui consisté à mettre 2 par 2 les image par ligne (faut savoir que sur ma version pc les téléphones sont affichés en 4 car j'ai choisi un conteneur de 4 compartiments d'image individuelle) mais cette règle ne s'applique pas au premier image du coup j'ai rajouté ça pour déplacer l'image en question afin de la mettre à la bonne place

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.image {
    position: absolute; 
   right: -2.px;
		top: 315px;
}

mais le soucis et que .image change d’emplacement pour différents mobiles par exemple sur mon iphone 11 pro max ils imagent (.image)sont bien mais sur le samsung de ma collègue s23 ultra les images (.image) se superpose

je vous 3 images
1 qui est le résultat du premier code
2 qui est résultat de l'iphone
3 qui est du samsung

vous pouvez m'aider svp

[Mister Socrates]

Bonjour,
Pour éviter que les images du dessous n'empiètent sur les deux images du dessus, vous pouvez insérer la propriété suivante après la deuxième image:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

clear: both;