Question 263836 in Html Question posted in
Some basic documentation can be found here.

Html – Trouble to Make a Chat Box Responsive for Smaller Screens

I’m working on a chat box UI, and I’m having trouble making it responsive for smaller screens. I want the chat section to be responsive, meaning that it should automatically adjust its layout to fit the screen size. The main goal is to ensure that users, even on smaller screens, don’t have to scroll horizontally to access various elements like the send button.

<!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>
<style>
*{
  margin: 0;
  padding: 0;
}
:root {
  --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --msger-bg: #fff;
  --border: 2px solid #ddd;
  --left-msg-bg: #ececec;
  --right-msg-bg: #579ffb;
}


.mncht,
.mncht:before,
.mncht:after{
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
.mncht{
    box-sizing: border-box;
   margin: 5px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background-image: var(--body-bg);
  font-family: Helvetica, sans-serif;
}
.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 867px;
  margin: 25px 10px;
  height: calc(100% - 50px);
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: var(--border);
  background: #eee;
  color: #666;
}
.msger-header-title{
  margin: 2px;
  padding: 5px;
}
.nofs{
  margin: 2px;
}
.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.msger-chat::-webkit-scrollbar {
  width: 6px;
}
.msger-chat::-webkit-scrollbar-track {
  background: #ddd;
}
.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}
.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.msg:last-of-type {
  margin: 0;
}
.msg-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}
.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 15px;
  background: var(--left-msg-bg);
}
.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.msg-info-name {
  margin-right: 10px;
  font-weight: bold;
}
.msg-info-time {
  font-size: 0.85em;
}

.left-msg .msg-bubble {
  border-bottom-left-radius: 0;
}

.right-msg {
  flex-direction: row-reverse;
}
.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  color: #fff;
  border-bottom-right-radius: 0;
}
.right-msg .msg-img {
  margin: 0 0 0 10px;
}

.msger-inputarea {
  display: flex;
  padding: 15px;
  border-top: var(--border);
  background: #eee;
}
.msger-inputarea * {
  padding: 11px;
  border: none;
  border-radius: 3px;
  font-size: 1em;
}
.msger-input {
  padding: 20px;
  flex-grow: 1;
  margin: 10px auto;
  background: #ddd;
}
.msger-send-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  color: #000000;
  font-weight: bold;
  cursor: pointer;
  font-size: 24px;
  transition: background 0.23s;
}
.msger-send-btn:hover {
  background: #00b432;
}

.msger-send-btn-mg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 7px !important;
    margin: 10px 5px auto;
    font-size: 25px;
    height: 77%;
    width: 8%;
    color: #000000;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.msger-send-btn-mg:hover{
  background-color: #1ab479;
}
.msger-send-btn-mg i {
    margin-right: 2px;
}

.msger-send-btn-mg input {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 80%;
    opacity: 0;
    cursor: pointer;
}

.msger-send-btn-mg:hover {
    background-color: #0e8859;
}

.error {
    color: red;
    margin-top: 10px;
}

.hidden {
    display: none;
}

.snd-btn{
  margin-right: -11px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.ext-cr{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  font-size: 22px;
  cursor: pointer;
}
.ext-cr:hover{
  background:#52a4c5;
}
.ext-cr:focus{
  background:#36768f;
}
.msger-chat {
  background-color: #fcfcfe;
  /* background-image:  */
}

</style>
<body>
    <div class="mncht">
    <section class="msger">
        <header class="msger-header">
          <div class="msger-header-title">
            <i class="fas fa-comment-alt nofs"></i>&nbsp; &nbsp; Chat Kura
          </div>
          <div class="msger-header-options">
            <span class="ext-cr" id="open-modal"><i class="fa-regular fa-circle-xmark"></i></span>
          </div>
        </header>
      
        <main class="msger-chat">
          <div class="msg left-msg">
            <div
             class="msg-img"
             style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"
            ></div>
      
            <div class="msg-bubble">
              <div class="msg-info">
                <div class="msg-info-name">Your name</div>
                <div class="msg-info-time">Message Time</div>
              </div>
      
              <div class="msg-text">
                You can change your name in JS section!
              </div>
            </div>
          </div>
      
          <div class="msg right-msg">
            <div
             class="msg-img"
             style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"
            ></div>
      
            <div class="msg-bubble">
              <div class="msg-info">
                <div class="msg-info-name">Your Name</div>
                <div class="msg-info-time">Message Time </div>
              </div>
      
              <div class="msg-text">
                You can change your name in JS section!
              </div>
            </div>
          </div>
        </main>
      
        <form class="msger-inputarea">
            <button class="msger-send-btn-mg">
        <i class="far fa-images" id="thfn"></i>
        <input type="file" id="imageInput" accept="image/*" onchange="validateImage()">
    </button>
    <p id="errorText" class="error hidden">File size exceeds the limit (2MB).</p>
          <input type="text" class="msger-input" placeholder="Enter your message...">
          <div class="snd-btn">
          <button type="submit" class="msger-send-btn"><i class="fas fa-paper-plane"> </i> &nbsp;
          </button> </div>
        </form>
      </section>
    </div>

    
    <script>
const msgerForm = get(".msger-inputarea");
const msgerInput = get(".msger-input");
const msgerChat = get(".msger-chat");

const BOT_MSGS = [
  "Hi, how are you?",
  "Ohh... I can't understand what you trying to say. Sorry!",
  "I like to play games... But I don't know how to play!",
  "Sorry if my answers are not relevant. :))",
  "I feel sleepy! :("
];

// Icons made by Freepik from www.flaticon.com
const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
const BOT_NAME = "BOT";
const PERSON_NAME = "Sajad";

msgerForm.addEventListener("submit", event => {
  event.preventDefault();

  const msgText = msgerInput.value;
  if (!msgText) return;

  appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
  msgerInput.value = "";

  botResponse();
});

function appendMessage(name, img, side, text) {
  //   Simple solution for small apps
  const msgHTML = `
    <div class="msg ${side}-msg">
      <div class="msg-img" style="background-image: url(${img})"></div>

      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${name}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>

        <div class="msg-text">${text}</div>
      </div>
    </div>
  `;

  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
  msgerChat.scrollTop += 500;
}

function botResponse() {
  const r = random(0, BOT_MSGS.length - 1);
  const msgText = BOT_MSGS[r];
  const delay = msgText.split(" ").length * 100;

  setTimeout(() => {
    appendMessage(BOT_NAME, BOT_IMG, "left", msgText);
  }, delay);
}

// Utils
function get(selector, root = document) {
  return root.querySelector(selector);
}

function formatDate(date) {
  const h = "0" + date.getHours();
  const m = "0" + date.getMinutes();

  return `${h.slice(-2)}:${m.slice(-2)}`;
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
 
    </script>
<script>
    function validateImage() {
            const fileInput = document.getElementById("imageInput");
            const errorText = document.getElementById("errorText");
            const maxSize = 2 * 1024 * 1024; // 2MB

            if (fileInput.files.length > 0) {
                const fileSize = fileInput.files[0].size;
                if (fileSize > maxSize) {
                    errorText.style.display = "block";
                } else {
                    errorText.style.display = "none";
                }
            }
        }
</script>
<script src="main.js"></script>
</body>
</html>

I’ve attempted to add some media queries to adjust the layout in css, but it’s not achieving the level of responsiveness.

@media (max-width: 768px) {
  .msger {
    margin: 0 auto;
  }

  .msger-chat {
    max-height: 250px;
  }
}

@media (max-width: 480px) {
  .msger-header,
  .msger-inputarea {
    padding: 10px;
  }
}

Thank You for your help, 😉 .

Tags:

2

Answers


  1. 0

    As I can see padding in ".msger-inputarea" is giving you trouble, set it to 0 in ".msger-inputarea *" for width smaller then 500px, you can then set padding in ".msger-inputarea" to 0 for width smaller then 400px, and you are left with adjusting the sizes of elements: font sizes, input field size, etc.

    Login or Signup to reply.
  2. 0

    The two buttons and the textarea are too big to fit in the small screen. You can try to change the layout of them to make it not scroll horizontally.
    I’ve set up a media query which seems to work on screen size above 290px (if you don’t want to change the layout of the bottom elements).
    Try pasting this at the end of your CSS.

    @media (max-width: 420px) {
  .msger {
    margin:  25px 0;
  }
  .msg-bubble {
    font-size: 0.8rem;
  }
  
  .msger-input {
    padding: 0 20px;
    width: 130px;
    
  }
  .snd-btn {
    padding: 11px 0px;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search