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;
}
}
Afficher la suite
