Forum : Adapter la taille d'une div en fonction de la résolution et du texte

Bonsoir,

Bonsoir

Quelqu'un connait-il une propriété CSS qui permet d'adapter la taille d'une div en fonction de la résolution de l'écran.

En effet j'ai un texte dans une div

Sauf que lorsque je rétrécie la taille de l'écran non seulement le texte dépasse, mais

je veux pouvoir garder tout mon texte dans la div

Et que la div s'agrandisse en y ou en x.

Voici mon code

<div class="row">
  <div class="col-md-6" id="BlockAvis"  style="border: solid; margin-top: 15px; height: 150px; padding-top: 10px; background-color: yallow; border-radius: 15px">
      <center><h2>98,76 %</h2> de ceux qui ont essayé le jeux amical on recommandé et CONTINU de recommander le jeu à leurs proches.<br><h5>Pourquoi pas vous ?</h5></center>
  </div>
  <div class="col-md-6" id="BlockInvitation" style="border: solid; margin-top: 15px; min-height: 150px; background-color: green; border-radius: 15px">
      <center><a href="register.php"><img src="img/Uwandzani%20logo.jpg"></a></center>
    <center><h2>Devenez vous aussi un joueur d'exeption !</h2></center>
  </div>
</div>

Je souhaite pouvoir garder le texte visible dans "boite" de la div quequ'en soit le résolution.

DeGlinGo117

Réponse acceptée

Hello,

Pourquoi ne pas utiliser les media queries qui sont justement faites pour adapter le CSS selon la résolution de l'écran ?

Exemple pour un support mobile que tu peux utiliser pour tester (application d'une taille de 20% pour la div et d'une couleur de fond #c54a4a) :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    div {
        width: 20%;
        background-color: #c54a4a;
    }
}

PS : attention "yallow" n'existe pas en anglais, c'est plutôt "yellow" comme le fait remarquer Lartak.

Huggy

As-tu essayé les propriétés
overflow-x et overflow-y ?

Lartak

Bonjour.
Tu devrais commencer à éviter de laisser du texte sans balise adéquate l'entourant, c'est à dire que dans ton cas tu devrais par exemple placer le texte qui suit le h2 de ton block BlockAvis dans un paragraphe, soit <p>.

Quelqu'un connait-il une propriété CSS qui permet d'adapter la taille d'une div en fonction de la résolution de l'écran.

Vu que tu sembles utiliser le Framework CSS de Bootstrap, tu pourrais par exemple aussi utiliser les autres classes concernant le responsive, soit col-lg et col-sm, tu n'es pas obligé d'en utiliser qu'une seule, tu peux les enchaîner de manière à ce que ton CSS ait un affichage différent pour la largeur de tes éléments selon les tailles d'écran.

Pour ce qui concerne le texte, tu devrais consulter la documentation de Bootstrap, il y a différentes classes concernant l'alignement et autres pour les textes.

Au passage, pour information, la balise <center> est obsolète/dépréciée.
C'est quoi cette couleur yallow , je suis nul en anglais mais je ne me rappelle pas avoir déjà vu ce nom de couleur ?

Adapter la taille d'une div en fonction de la résolution et du texte

3 réponses