[Résolu] Problème d'affichage sur téléphone

Bonjour, je sollicite votre aide car j'ai un problème au niveau de l'affichage de mes annonces à partir de tout téléphone. Mon site (responsive) désormais hébergé, l'affichage se passe correctement à travers l'ordinateur et le téléphone (un tout petit peu). Lorsque je réduis la fenêtre de l'ordinateur pas de problème, c'est responsive, mais lorsqu'on va sur le site à partir du téléphone pour consulter les annonces, la maquette de l'annonce se déforme, c'est à dire que la div contenant la photo et la div contenant les informations de l'annonces se superposent.

==>Est-ce à cause de la taille de l'écran du téléphone? Si oui, que faire?
Voici le CSS:

.conteneur-annoncea {
  padding-top: 40px;
  margin-top: 150px;
  max-width: 720px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0.25em auto;
}

.conteneur-annonce > div {
  min-width: 240px;
  box-sizing: border-box;
}
.container {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0.25em auto;
}

.container > div {
  min-width: 240px;
  box-sizing: border-box;
  border: 1px solid orange;
}

.slider {
  position: relative;
  height: 174px;
  overflow: hidden;
  flex: 1;
}

.slider img {
  display: block;
  position: absolute;
  width: 240px;
  height: 174px;
}
.informations {
  padding: 0.25em;
  background: #eee;
  width: auto;
  flex: 2;
}

.informations a {
  text-decoration: none;
  color: #000;
}

Voici le code source HTML:

<div class="conteneur-annoncea">

<div class="tri">
				<span>trier</span>
  
    <select onchange='trier(this.value)' id='prix-superficie'>
    <option value=''>Default</option>
    <option value='price|1'>Prix du plus bas au plus haut</option>
<option value='price|-1'>Prix du plus haut au plus bas</option>
</select>		
</div>

<p class="toutes"></p>
        <div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="/../picturesFB_IMG_1645471353168.jpg"><img class ="active" style="width:240px; height:170px;" src="/../picturesFB_IMG_1645471340254.jpg">
<img class ="active" style="width:240px; height:170px;" src="/../picturesFB_IMG_1645471333957.jpg">
</div>
<div class= "informations"><a class="maquette" href="/principales/single.php?id=4"  > 

<p class='category'><i class='fa fa-list-alt'></i> Voitures</p>
<p class='price'><span class='mru'>Prix  :</span><span class='valeur'>0</span></p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-02-21</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>Ville1</p></a>
</div>
</div>
</div>

Auriez-vous une solution?

Franchement, merci beaucoup Laurent! Effectivement tu as raison.
Je ne savais pas à quoi la meta viewport servait. Elle était à 1.0:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

En la ramenant à 0.5, le problème a disparu, et tout s'affiche correctement.

 <meta name="viewport" content="width=device-width, initial-scale=0.5">

Grand merci laurent

hahaha je m'attendais pas à ça normalement il faudrait faire :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

pour avoir un zoom normal du coup ton soucis viendrait d'ailleurs... (positions absolues, tailles fixes, etc...)
Le 0.5 fait comme un dézoom de ton site donc c'est pas vraiment régler le soucis (enfin si ca te convient comme ca je vais pas t'embêter plus hein)

Avec le initial-scale=1.0, le zoom était trop important, ce qui déformait la maquette de l'annonce, mais en le fixant un peu plus bas la maquette retrouve sa norme.