Je galère en css (divs) et en hover poussé

Bonjour, je suis en train de coder un site de vêtements en ligne. Mais j'ai beaucoup de problèmes, tous reliés au fait des résolutions d'écran impactant sur la disposition des div de mon site. J'en ai réglé beaucoup, utilisant flex, mais il en reste un:
-j'ai 3 divs correspondant aux trois catégories de produits, et je veux qu'elles soient alignées sur la même ligne sans déborder. Mais avec d'autres tailles d'écran, la dernière passe à la ligne, et avec un nowrap, elle sort du champ


Dernier problème que je n'ai pas parvenu à résoudre et qui n'a aucun rapport, j'aimerais que quand on passe sur une div catégorie, il t ait comme un header et un footer apparaissant au dessus de l'image. Je n'explique pas bien je pense, tenez un montage:

Merci d'avance, en espérant recevoir une réponse sous peu
Paul
PS: voici le code

<section id="products">
			<div class="single_product">
				<img src="https://zupimages.net/up/19/23/9c02.png" alt="bannier" class="products_image"/>			
			</div>

			<div class="single_product">
				<img src="https://zupimages.net/up/19/24/v26k.png" alt="bannier" class="products_image"/>				
			</div>

			<div class="single_product">
				<img src="https://zupimages.net/up/19/23/hena.png" alt="bannier" class="products_image"/>
								
			</div>			
		</section>
	</body>

#products
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.single_product
{
  flex: 0 ;
}



.products_image
{
  width: 45em;
  border:5px solid black;
  cursor:pointer;
  margin: 50px;
  margin-bottom: 70px;
  padding-top:100px;
  border-radius: 10px;
}

Modifié par Paullrn (20 Jun 2019 - 22:29)

bonjour
avec tes 3 images en width:33%
elles rempliront la largeur du viewport peu importe la taille de l'écran

ou je n'ai pas compris

Bonjour,
je ne réponds pas précisément à ta question, mais je te propose de regarder ce que j'avais réalisé pour un site du même genre (vente de bijoux). Le site n'est pas en service, la personne ayant renoncé, mais je le garde au chaud. Pour les images des bijoux ou vêtements en vente, j'avais opté pour une galerie responsive, très efficace. Pour un site commercial, je te conseille de ne pas entourer les images, ça donne un effet plus pro. Prenant modèle sur les sites de vente de produits du même genre, je n'ai pas déclenché de texte au "hover". Le titre et le prix de chaque marchandise s'affichent en-dessous de l'image. Mais tu peux décider de l'afficher au survol (attention aux appareils tactiles).
Le css :

div.desc {
    padding: 0 5px 0 5px;
    font-size:.8em;
    text-align: center;
}
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%; 
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .responsive {
        width: 50%;
    }
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

le html :

<div class="responsive">
  <div class="img">
    <a target="_self" href="Images/Boucle-1024.png">
    <picture>
   <source media="(min-width: 16em)" 
      srcset="Images/Boucle-320.png 320w,
      Images/Boucle-780.png 780w" sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
	100vw"/> 
	<img src="Images/Bracelet-1024.jpg" alt=""/></picture>
    </a>
    <div class="desc">Boucle fantaisie, plaquée or<br> <span class="prix">Prix : 100€</div>
  </div>
</div>

... et répété autant de fois que tu veux d'images.
Si tout ça peut t'aider.
Cordialement.

je vais tout essayer, merci beaucoup!

je vais essayer de changer quelques trucs
Modifié par Paullrn (21 Jun 2019 - 22:59)

drphilgood a écrit :
bonjour
avec tes 3 images en width:33%
elles rempliront la largeur du viewport peu importe la taille de l'écran

ou je n'ai pas compris

et bien j'avais déja essayé, et mes images deviennent minuscules!

niuxe a écrit :
Bonsoir,

je t'invite à me lire :

*{
  box-sizing:border-box;
}
#products{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


#products > div{
  width:calc(33% - 25px);
  padding:15px;
  border:5px solid black;
  cursor:pointer;
  border-radius: 10px;
  display:flex;
}

#products img{
  width: 100%;
  margin:auto;
}

ps :
- un élément <section> sans titre ?
- un id pour une section ?
- un élément <div> avec cursor pointer ?

j'ai connecté deux neurones, j'ai changé deux trois trucs et ca marche!

c'est bon j'ai réussi, mais il y a un nouveau problème: la hauteur des divs part en cacahuètes:
elle est parfaite sur mon écran, mais dès que je réduis l'écran ou que je le met sur un écran plus petit, il y a énormément d'espaces blancs au dessus et en-dessous...

Je t'invite à lire ou relire cet article : Les Media Queries CSS3

Les medias Queries vont t'aidez pour l'aspect responsive de ton site web:
Ils permettes selon la largeur de la page, d’adapter ses éléments.
exemple:

/*Part Default sans Media Queries*/
.mon-cadre-avec-img{
width:33%;
height:auto;

}

@media screen and (max-width: 1000px)
.mon-cadre-avec-img{
width:30%;
height:auto;
max-height:250px;
}
}
@media screen and (max-width: 800px)
.mon-cadre-avec-img{
width:30%;
height:auto;
max-height:200px;
}
}