Discussion :

[leroilion94]

bonjours, j'ai un souci pour présenté ma galerie des membres

voilà ceux que j'ai fais

http://codepen.io/anon/pen/OMmWGr

quand je réduis la fenêtre il ne suit pas

je voudrais bien mettre 3 ou 4 voir 5 par ligne

je ne vois pas comment faire

si quelque qu'un peut m'aidé a remettre correctement afin d'aligner 5 cadres par ligne

merci

[Invité]

Bonjour,

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.galeriemembre
{
	  float:left;
	  border:1px solid #CCCCCC;
	  padding:0;
 
	  margin:1%;
	  /*width:48%;*/ /* 2 par ligne */
	  width:23%; /* 4 par ligne */
	  box-sizing:border-box; /* important à cause du border 1px */
}

Ensuite, on utilise les media queries pour modifier le nombre par ligne, en fonction de la largeur écran.
Par exemple :

Code css :

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

1
2
3
4
5
6
7
8
9
@media screen and (min-width:641px) and (max-width:1024px) {
  .galeriemembre { width:31.33%; }
}
@media screen and (min-width:321px) and (max-width:640px) { 
  .galeriemembre { width:48%; }
}
@media screen and (max-width:320px) { 
  .galeriemembre { width:98%; }
}

N.B. Pour info, inutile d'écrire 0px ou 0%. On écrit 0 tout court.

[leroilion94]

merci je savais pour les média etc.. et border 0px mais j’écris toujours comme je fais et a la fin je le réduis le css lol

juste une question si par exemple sur un ecran petit que je voudrais supprimer une phrase ou un <div etc..

comment je doit faire afin de garder tout les infos sur un grand écran et quand on passe sur une version mobile supprimer une phrase

par exemple sur le grand ecrant je gardes le cadre info
sur la version mobile je voudrais supprimer le cadre info

comment faire pour le code html car le css je sais il faut mettre un display none

dans le html il faut metre 2 class il faudra dire dans le html quil distingue cete classe a pour les grand ecrant et l'autre class ca sera pour la version mobile

[Invité]

Bonjour,

pour une détection en amont (au niveau PHP), il y a Mobile Detect.