Shrinking html items to match screen-size? - html

Question

I have a page that includes a large vertical form and I need it to be resized depending on the screen size. I want the form inputs to shrink with adequate margins on both the left and right side. My css consists of code like:
.container-register input#search, select {
width: 300px;
}
This makes the initial input widths fairly long so I have tried using #media (max-width) scripts to change the length but it looks very hardcoded. I want it to seamlessly change depending on the viewport without me having to use these #media scripts for every possible viewport width. I was thinking maybe something like flex? However I was having trouble using it.
<div class="body-content-register">
<div class="wrapper">
<center><section id="bg" class="zoom-register">
<div class="box-register">
<center><h1>Register</h1></center>
<form class="register">
<div class="container-register">
<span class="icon"><i class="fa fa-user"></i></span>
<input type="search" name="fullname" id="search" placeholder="Full Name">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-envelope"></i></span>
<input type="search" id="search" placeholder="Email">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-user"></i></span>
<input type="search" id="search" placeholder="Username">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-birthday-cake"></i></span>
<input type="search" id="search" placeholder="Date of Birth">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-map-marker"></i></span>
<input type="search" id="search" placeholder="Postcode">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-key"></i></span>
<input type="search" id="search" placeholder="Password">
</div><br><br><br><br>
<div class="container-register">
<span class="icon"><i class="fa fa-key"></i></span>
<input type="search" id="search" placeholder="Confirm Password">
</div><br><br><br><br>
<div class="float-middle">
<input type="checkbox" name="checkbox" value="checkbox"> Do you accept our terms & conditions?<br>
</div><br>
<button class="button"><strong>Submit</strong></button>
</form>
</div>
</section></center>
</div>
</div>

Answer 1

Besides using media queries you can use intrinsic units of measurement like vw and vh. Not related to the question but I feel I should point out that #ID must be unique so you can't have every element have id='search'. The type attribute of an <input> determines its behavior so type="search" isn't really what you need. Also there are more suitable tags that you could use other than <div> and <span>, but that's purely optional. I changed the layout a bit to reflect what I previously mentioned.
Demo
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
}
.icon {
display: inline-block;
margin: 0 0 2vw 2vh;
}
h3 {
margin: 0
}
.line {
border: 0;
width: 96vw;
margin: 0;
padding: 0
}
i {
width: 3vw;
margin: 0 1vw 0 0;
}
.name {
display: block
}
#fullName {
width: 86vw;
}
input {
font: inherit;
width: 39vw;
}
.DOB input {
width: 12vw;
text-align: center;
}
.disclosure {
display: block;
margin: 2vh auto 0;
width: 80vw;
}
#accept {
width: 3vw;
}
[type=submit] {
width: 16vw
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<main>
<form id='register'>
<fieldset id="bg">
<legend>
<h3>
Register
</h3>
</legend>
<label class="icon name"><i class="fa fa-user"></i>
<input type="text" id="fullName" name="fullName" placeholder="Full Name"></label>
<fieldset class='line'>
<label class="icon email"><i class="fa fa-envelope"></i>
<input type="email" id="email" placeholder="Email"></label>
<label class="icon user"><i class="fa fa-user"></i>
<input type="text" id="userName" name="userName" placeholder="Username"></label>
</fieldset>
<fieldset class='line'>
<label class='icon DOB'> <i class="fa fa-birthday-cake"></i>
<input type="number" id="DOBmonth" name="DOBmonth" placeholder="Month" min='1' max='12'>
<input type="number" id="DOBday" name="DOBday" placeholder="Day" min='1' max='31'>
<input type="number" id="DOByear" name="DOByear" placeholder="Year" min='1900' max='2000'></label>
<label class="icon country"><i class="fa fa-map-marker"></i>
<input type="text" id="country" name='country' placeholder="Country"></label>
</fieldset>
<label class="icon pass"><i class="fa fa-key"></i>
<input type="password" id="pass" placeholder="Password">
<input type="password" id="confirm" placeholder="Confirm Password">
</label>
</fieldset>
<label class='disclosure'>
<input type="checkbox" id='accept' name="accept" value="accept"> Do you accept our terms & conditions?
<input type="submit"></label>
</form>
</main>