Bonjour à tous 

Je finalise mon site en responsive et je souhaiterai que mes images prennent toute la largeur de mon écran quand je passe en responsive  . Je n'arrive pas à modifier leur tailles ni leurs largeur et je ne comprends pas pourquoi .

Quelqu'un peux me donner un coup de génie ?

Voici mon code 

<figure>
 		<img src ="images/portfolio/tn_01.jpg" alt="photo01" />
 			<figcaption> 
 			<div class="cercle"></div>
					<div class="eye-logo"> 
					<p> <i class="fas fa-eye"></i> </p>
					</div>
			</figcaption>
    </figure>

.images /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
	{ 

	display:flex;
	flex-direction: column; 
	padding-bottom: 80px;
	 }

noopy360 a écrit:

Salut, ton CSS ne correspond pas au code HTML la class images du coup si tu utilise ta class images pour modifier ça largeur ca ne risque pas de fonctionner...

Oui oui je sais bien mais justement je me demandais sur quoi il fallait que je modifie et surtout quel propriété utiliser car rien ne fonctionne

Il te faut pour ça que tu modifie ton CSS comme ça :

figure /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
	{ 

	display:flex;
	flex-direction: column; 
	padding-bottom: 80px;
	 }

Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

Avec le code que tu nous montres, il suffit d'ajouter ça aux CSS :

 img {
   width:100%;
}

noopy360 a écrit:

Il te faut pour ça que tu modifie ton CSS comme ça :

figure /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
	{ 

	display:flex;
	flex-direction: column; 
	padding-bottom: 80px;
	 }

Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

Désolé pour le temps de réponse , même en changeant mon code CSS comme cela , ca ne prend pas toute la largeur ; ca me laisse des marges de chaque côtés et l'image est etirée ...

Bonjour, tu as raison il faut faire ça aussi

body{ margin:0; }
figure{ /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
  margin:0;
  display:flex;
  flex-direction: column; 
  padding-bottom: 80px;
}

Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

noopy360 a écrit:

Bonjour, tu as raison il faut faire ça aussi

body{ margin:0; }
figure{ /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
  margin:0;
  display:flex;
  flex-direction: column; 
  padding-bottom: 80px;
}

Pour que cela fonctionne j'ai du mettre une marge négative ( -60px) 

J'ai également un autre soucis qui m'ennuie , je voudrais que mes images soit en colonnes collées les unes aux autres , as tu une idée de comment réaliser ceci ?