Currently, I'm facing a challenge with ensuring the responsiveness of a chat box UI for smaller screens. The aim is to make the chat section adaptive so that users can access all elements without having to horizontally scroll, even on small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<title>Chat Box</title>
</head>
... (CSS code omitted for brevity)
<body>
<div class="mncht">
<section class="msger">
... (HTML code omitted for brevity)
</section>
</div>
<script>
... (JS script snippet goes here)
</script>
<script src="main.js"></script>
</body>
</html>Despite incorporating media queries in CSS to adjust the layout based on screen size, achieving the desired level of responsiveness remains a challenge.
@media (max-width: 768px) {
.msger {
margin: 0 auto;
}
.msger-chat {
max-height: 250px;
}
}
@media (max-width: 480px) {
.msger-header,
.msger-inputarea {
padding: 10px;
}
}
Your assistance and insights are greatly appreciated! :)