css adjusting vertical positioning of fixed element - html

Question

I'm having troubles with positioning the textbox for my chat. I can only make it look good for one specific resolution. On other screen sizes it just looks terrible. How can I adjust the position of the textbox for all resolutions (>1360px) to fit in the little darkgrey area on the bottom. When I try to adjust it for one resolution it won't look good on the other resolutions.
https://jsfiddle.net/4pvfwz11/1/
<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
<ol class="chat">
<div id="fullchat">
<li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
</div>
<div class="chat_error"></div>
</ol>
</div>
<div class="toggle-sound"></div>
<input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>
<style type="text/css">
div.chat_error {
color: #e20f0f;
padding-left: 10px;
padding-top: 1rem;
}
.chatdiv
{
position: fixed;
left: 40px;
background-color: #101010;
height: 90vh;
}
.chatdiv .name{
top: 3px;
left: 110px;
font-size: 10px;
font-weight: bold;
color: rgba(256,256,256,0.80);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar img {
margin-top: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #187006;
margin-left: 10px;
background-color: #27af0c;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #0a95db;
box-shadow: 1px 2px 0px #055f8c;
margin-left: 10px;
}
.bot .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #a50808;
box-shadow: 1px 2px 0px #6b0606;
margin-left: 10px;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 15px;
margin: 0 0 0.2rem 0;
color: white;
}
.msg time {
font-size: 10px;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* T Y P E */
input.textarea {
position: absolute;
width: 89%;
height: 50px;
left: 15px;
bottom: 3vh;
background: white;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
color: #666;
font-weight: 400;
}
div.toggle-sound {
position: fixed;
bottom: 13vh;
left: 65px;
font-weight: bold;
font-size: 20px;
}
.scrollbar
{
float: left;
height: 80vh;
background-color: #232323;
overflow-y: scroll;
margin-bottom: 25px;
width: 100%;
}
.force-overflow
{
min-height: 90vh;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #232323;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #232323;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E20F0F;
}
</style>

Answer 1

If you want different CSS for different screen sizes you can use something called media queries. I don't know exactly what rules you want to change for different screen sizes, but let's do a quick example. Let's say you want to make the background color of the textbox red on screens with a width less than or equal to 900px. This can be done with the following media query:
#media (max-width: 900px) {
input.textarea {
background-color: red;
}
}
So what you can do is just to figure out what CSS changes you want to do on different screen sizes, and then make media queries for all of them. You can read more about media queries here.