Hey there! I need some assistance with making my Chat site/application responsive. I'm not too familiar with CSS, but I'm the sole developer on this project, so I'm trying my best. I initially designed the site in Photoshop and then started creating it using HTML & CSS. While it looks great overall, some parts are not responsive, especially the messages container. Can someone guide me on how to make everything responsive or just help me out by providing a version of the site that is fully responsive?
Here's what I have so far in terms of code:
HTML (with EJS):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home - <%= name %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="content">
<div class="nav">
<h1 class="navTitle">Atlas Chat</h1>
<h2 class="navUsername"><%= user ? user.username : "Not logged in" %></h2>
<% if(user !== null) { %>
<a class="navitem logoutbtn" href="/logout">Logout</a>
<% } else { %>
<a class="navitem loginbtn" href="/login">Login</a>
<a class="navitem" href="/register">Register</a>
<% } %>
</div>
<div class="main">
<div class="roomInfo">
<span class="hashtag">#</span><input type="text" class="roomname" pattern="^[a-z0-9\-]{0,16}$" required placeholder="channel-name"><button class="roomnamebtn">Join</button>
</div>
<hr>
...
</div>
</div>
<div class="users">
<h1 class="usersTitle">Online Users</h1>
<ul class="usersList">
...
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
...