Problème avec des @média

Résolu/Fermé
Kalen - Modifié le 29 avril 2021 à 12:49
 Kalen - 29 avril 2021 à 13:26
Bonjour,
j'ai fais un style pour un chat et je veux changer ce style quand l'écran fait moins de 500px de largeure.
J'ai essayé avec un média query mais malheureusement ça na marche pas :(
merci de bien vouloir m'aider.
voici mon code:

HTML:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<title>Chat...</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="chat-global">
  <div class="nav-top">
   <div class="location">
    <i class="fal fa-chevron-left"></i>
    <span>Back</span>
   </div>
   <div class="utilisateur">
    <p>John Doe</p>
    <p>Active Now</p>
   </div>
   <div class="logos-call">
    <i class="fal fa-phone-alt"></i>
    <i class="fal fa-video"></i>
   </div>
  </div>
 <div class="conversation-slider">
  <div class="conversation">
   <div class="talk left">
    <img src="images/avatar2.jpg">
    <pre>Lorem ipsum dolor sit amet</pre>
   </div>
   <div class="talk right">
    <pre>Lorem ipsum dolor sit amet</pre>
    <img src="images/avatar1.jpg">
   </div>
   <div class="talk left">
    <img src="images/avatar2.jpg">
    <pre>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</pre>
   </div>  
   <div class="talk right">
    <pre>Lorem ipsum dolor sit amet</pre>
    <img src="images/avatar1.jpg">
   </div>
  </div>
 </div>
  
  <form class="chat-form">
   <div class="container-input-stuffs">
    <div class="files-logo-cont">
     <i class="fal fa-paperclip"></i>
    </div>
    <div class="group-inp">
     <textarea placeholder="Enter your message here" minlength="1" maxlength="1500" class="message"></textarea>
     <div class="all-emojis">
      <i class="fal fa-smile-beam"></i><div class="emojis-container">
      <i class="fal fa-times"></i>
      <div class="emojis-slider">
       <div>
        ????
       </div>
       <div>
        ????
       </div>
       <div>
        ❤️
       </div>
       <div>
        ????
       </div>
       
      </div>
     </div>
     </div>
     
     
    </div>
    <button class="submit-msg-btn">
     <i class="fal fa-paper-plane"></i>
    </button>
   </div>
  </form>
 </div>
</body>
</html>

CSS:
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #333;
}
body,
i {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
img {
  height: 30px;
}
i {
  font-size: 30px;
}
/* navigation top */
.chat-global {
  width: 500px;
  height: 600px;
  margin: 50px auto;
  border-radius: 25px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
}
.nav-top {
  position: absolute;
  background: #000;
  top: 0;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(204, 204, 204, 0.8);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.nav-top .location {
  width: 100%;
  display: flex;
  align-items: center;
}
.nav-top .location i {
  margin-left: 10px;
}
.nav-top .location span {
  font-size: 20px;
  margin-left: 10px;
}
.utilisateur {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.utilisateur p:nth-child(1) {
  font-size: 20px;
}
.utilisateur p:nth-child(2) {
  font-size: 14px;
  opacity: 0.8;
}
.logos-call {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.logos-call i {
  margin-right: 20px;
}
/* conversation */
.conversation {
  display: flex;
  background: #000;
  flex-direction: column;
  position: absolute;
  height: 440px;
  bottom: 90px;
  width: 100%;
  overflow: auto;
}
.conversation::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
.talk pre {
  padding: 15px;
  line-height: 25px;
  border-radius: 20px;
  background: #ff9800;
  color: #0e0e0e;
  font-family: Arial, Helvetica, sans-serif;
  word-break: break-word;
  white-space: pre-wrap;
}
.left pre {
  background: rgb(39, 39, 39);
  color: #fff;
}
.talk img {
  margin: 0 10px;
}
.conversation img {
  height: 50px;
  width: 50px;

  border-radius: 50%;
}
.conversation .talk {
  display: flex;
  max-width: 50%;
  padding: 10px 0;
}
.conversation .right {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

/****************FORM*********************/
.chat-form {
  background: #0e0e0e;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.container-input-stuffs {
  background: #000;
  display: flex;
  width: 90%;
  height: 60px;
  border-radius: 9999px;
}
.group-inp {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-inp i {
  font-size: 30px;
}
.group-inp textarea {
  background: #000;
  color: #fff;
  resize: none;
  border: none;
  outline: none;
  padding-left: 10px;
  font-size: 16px;
  width: 100%;
  height: 40px;
  padding-top: 10px;
  font-family: arial, sans-serif;
  overflow: hidden;
}
.files-logo-cont {
  padding-left: 10px;
  display: flex;
  height: 100%;
  width: 50px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.submit-msg-btn {
  background: #000;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 70px;
  border: none;
  outline: none;
  display: flex;
  padding-right: 5px;
  justify-content: center;
  align-items: center;
}
.fa-smile-beam {
  position: relative;
}
.emojis-container {
  background: #0e0e0e;
  border: 2px solid #ff9800;
  border-radius: 15px;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  display: none;
  flex-direction: column;
}
.emojis-container i {
  width: 90%;
  height: 15%;
  border-bottom: 1px solid #ff9800;
  margin: 10px;
  margin-bottom: 0;
}
.emojis-slider {
  background: #222;
  margin: 0 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 90%;
  height: 75%;
  user-select: none;
  display: flex;
  align-items: space-around;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: auto;
}
.emojis-slider::-webkit-scrollbar-track {
  cursor: pointer;
}
.emojis-slider::-webkit-scrollbar {
  background: #0e0e0e;
  width: 5px;
}
.emojis-slider::-webkit-scrollbar-thumb {
  background-color: #ff9800;
}
.emojis-slider div {
  padding: 2.5px;
  font-size: 28px;
}
.all-emojis {
  position: relative;
}
@media screen and (max-width: 500px) {
  .chat-global {
    margin: 0px auto;
    width: 100vw;
    height: 100vh;
  }
  .nav-top {
    height: 10%;
  }
  .nav-top .location i {
    margin-left: 40px;
    font-size: 4em;
  }
  .nav-top .location span {
    font-size: 60px;
    margin-left: 30px;
  }
  .utilisateur p:nth-child(1) {
    font-size: 60px;
  }
  .utilisateur p:nth-child(2) {
    font-size: 44px;
  }
  .logos-call i {
    font-size: 4em;
    margin-right: 40px;
  }
  .conversation {
    height: 80%;
    bottom: 10%;
    width: 100%;
  }
  .conversation img {
    height: 100px;
    width: 100px;
    margin: 0 20px;
  }
  .talk pre {
    padding: 40px;
    line-height: 40px;
    border-radius: 50px;
    font-size: 2.5em;
  }
  .chat-form {
    height: 10%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .container-input-stuffs {
    background: #000;
    display: flex;
    width: 90%;
    height: 70%;
    border-radius: 9999px;
  }
  .files-logo-cont {
    padding-left: 40px;
    display: flex;
    height: 100%;
    width: 100px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .fal,
  .fas {
    font-size: 4em;
    padding: 10px;
  }
  .group-inp i {
    font-size: 4em;
    padding: 10px;
  }
  .group-inp {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .group-inp textarea {
    padding-left: 10px;
    font-size: 40px;
    height: 45px;
    padding-top: 0;
  }
  .submit-msg-btn {
    border-top-right-radius: 250px;
    border-bottom-right-radius: 250px;
    width: 70px;
    padding-right: 25px;
  }
}
A voir également:

2 réponses

dugenou Messages postés 6083 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 450
Modifié le 29 avril 2021 à 13:14
Bonjour,

Il manque dans la partie <head> de ta page HTML, la balise <meta> suivante :

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



0
ça marche maintenant merci beaucoup !!
0