How To Get Responsiveness In Self Made HTML & CSS WebPage - html

Question

I've made a Register template with HTML & CSS. But It isn't responsive at all.
It gets very weird when I try to decrease the browser width, like this.
This Gets Turned into That:
My HTML Code:
<link rel= "stylesheet" type= "text/css" href = "register.css">
<div id="login-box">
<div class="left-box">
<h1>Register</h1>
<form action="#" method="post">
<input type="text" class="txtb" placeholder="Username">
<input type="text" class="txtb" placeholder="Email">
<input type="text" class="txtb" placeholder="Password">
<input type="text" class="txtb" placeholder="Confirm Password">
<input type="submit" value="Sign Up" name="signup-button" class="signup-btn">
</form>
<small class="text-muted ">Already Have An Account?Login</small>
</div>
<div class="right-box">
</div>
</div>
My CSS Code:
body
{
margin: 0;
padding: 0;
font-size: 16px;
color: #777;
font-family: sans-serif;
font-weight: 300;
background-image: url(images/image.jpg);
background-size: cover;
background-position: center;
}
#login-box
{
position: relative;
height: 430px;
width: 630px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
transform: translate(45%, 14%);
}
.left-box
{
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
width: 300px;
height: 430px;
}
h1
{
margin: -10px 0 20px 0;
font-weight: 300;
font-size: 28px;
}
input.txtb
{
display: block;
box-sizing: border-box;
margin-bottom: 26px;
padding: 4px;
width: 220px;
height: 34px;
border: none;
outline: none;
border-bottom: 1px solid #aaa;
font-family: sans-serif;
font-weight: 400;
font-size: 15px;
transition: 0.2s ease;
}
input[type="submit"]
{
height: 32px;
width: 47%;
margin-top: 10px;
margin-bottom: 20px;
background: transparent;
border-radius: 44px;
cursor: pointer;
transition: 0.6s;
border-style: none;
background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
color: white;
}
input[type="submit"]:hover,
input[type="submit"]:focus
{
transform: scale(1.04);
}
.right-box
{
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 40px;
width: 315px;
height: 430px;
background-image: url(images/bg.png);
background-size: cover;
background-position: center;
}
small a
{
margin-left: 4px;
}
small a:hover
{
text-decoration: none;
}
#-webkit-keyframes autofill {
to {
color: black;
background: transparent;
}
}
.txtb:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
How Can I Avoid this and set a limit to screen minimize or just show something else when the browser width is decreased?
Thanks In Advance!

Answer 1

You will want to put a media query within your css declaration.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This example will give any device, that is 600px wide or less, a lightblue background.

Answer 2

Have you tried using Bootstrap? it's not that hard, it works great and theres a lot of documentation online and people on SO that can help you too. Here's a link to get you started: https://getbootstrap.com/
In a nutshell, bootstrap is a tool that helps you make simple websites responsive so they can scale between devices. In actuality it's a little more complcated than this but nothing to worry about.