[#tuto] Media Queries : une bulle de dialogue responsive

Lors de ma première intégration HTML/CSS d’une maquette au format PSD, j’ai été confronté à une problématique que j’ai solutionné grâce aux media queries : une bulle de dialogue positionnée à droite d’une illustration de smartphone en version desktop se retrouve en dessous de ce smartphone en version mobile. Problème : la pointe de la bulle doit se repositionner en fonction de la position de l’illustration.

Pour mieux se représenter le problème avant sa résolution, voici le rendu de la section qui nous intéresse en version smartphone : Deux problèmes se posent : le positionnement de la flèche de dialogue, mais aussi l’ordre d’affichage des éléments, qui comme vous pouvez le voir n’offre pas un rendu très esthétique. C’est ici que les media queries entrent en jeu : on va les utiliser pour appliquer de nouvelles propriétés aux balises HTML selon la taille d’écran de l’utilisateur. C’est un excellent outil pour rendre un projet responsive.  

La version desktop

Voyons à quoi ressemble mon code HTML :

<div class="container headercontainer">
  <div class="row mx-auto ">
    <div id="img-right" class="col-sm">
      <img src="img/phone2.png" alt="phone">
    </div>
    <div class="col-sm">
      <div class="headertext text-black">
        <div class="speech-bubble">
          <div class="quot">&quot;</div>
            <p class="flextexte">People are definitely a  compagny's greatest asset.It dosen't make<br> any difference wheter the product is cars or cosmetics.<br> A compagny is only as good as the people it keeps.<br><span class="johndoe"> John Doe</span>
            </p>
          <div id="quote-right" class="quot">&quot;</div>
        </div>
      </div>
  </div>
 </div>
</div>

Et voici mon code CSS avant l’application des media querries :

.speech-bubble:after {
        content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #ffffff;
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
}

 

La version mobile

Passons maintenant à la pratique. J’ajoute une class second à la div qui contient l’image de smartphone directement dans la balise HTML, ceci afin de pouvoir lui appliquer par la suite des attributs dans ma media querrie. Regardons à quoi ressemble mon code HTML à présent :

    <div id="img-right" class="col-sm">
      <img src="img/phone2.png" alt="phone">
    </div>
 

Il me suffit pour finir d’ajouter des media queries directement dans mon fichier CSS de la manière suivante :

@media only screen and (max-width: 768px) {
	
  .second {
	order: 2;
        margin-top: 20px;
        text-align: center !important;
  }
	
  .speech-bubble:after {
  	content: '';
  	position: absolute;
        top: 105%;
  	bottom: 0;
  	left: 50%;
  	width: 0;
  	height: 0;
  	border: 20px solid transparent;
  	border-top-color: #ffffff;
  	border-bottom: 0;
  	margin-left: -20px;
  	margin-bottom: -20px;
  }
	
}

Nous pouvons voir qu’à la première ligne j’ai réglé ma media querrie pour qu’elle se déclenchent sur des écrans avec une propriété width allant jusque 768 pixels. Il suffit de placer entre les accolades les class à modifier, puis d’ajouter les propriétés et les valeurs elles-même entre accolades. Voici le résultat: