`
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 20%;
padding: 0;
box-sizing:border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #ececec;
}
.container{
background-color: #ffffff;
min-width: 80%;
overflow: auto;
max-height:min-content;
height:auto;
padding: 3%;
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top: 80%;
border-radius: 1%;
box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}
.container .form {
margin-top: 30px;
}
.form .input-box {
width: 100%;
margin-top: 2%;
}
.input-box label {
color: #333;
}
.form :where(.input-box input, .select-box,) {
position: relative;
height: 50px;
width: 100%;
outline:none;
font-size: 1rem;
color: #707070;
margin-top: px;
border: 2px solid #ddd;
border-radius: 1px;
padding: 0 15px;
}
h1{
font-size: 30px;
text-align: center;
color: #1c093c;
}
p{
position: relative;
margin: auto;
width: 100%;
text-align: center;
color: #606060;
font-size: 14px;
font-weight: 400;
}
form{
width: 100%;
position: relative;
margin: 30px auto 0 auto;
}
.row{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
grid-gap: 20px 30px;
margin-bottom: 20px;
}
label{
color: #1c093c;
font-size: 14px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.flex-row {
display: flex;
}
.wrapper {
border: 1px solid #4b00ff;
border-right: 0;
}
canvas#signature-pad {
background: #fff;
width: 100%;
height: 100%;
cursor: crosshair;
}
button#clear {
height: 100%;
background: #4b00ff;
border: 1px solid transparent;
color: #fff;
font-weight: 600;
cursor: pointer;
}
button#clear span {
transform: rotate(90deg);
display: block;
}
textarea,
input{
width: 100%;
font-weight: 400;
padding: 8px 10px;
border-radius: 5px;
border: 1.2px solid #c4cae0;
margin-top: 5px;
}
textarea{
resize: none;
}
textarea:focus,
input:focus{
outline: none;
border-color: #6f6df4;
}
button{
border: none;
padding: 10px 20px;
background: linear-gradient(
130deg,
#6f6df4,
#4c46f5
);
color: #ffffff;
border-radius: 3px;
}
@media screen and (max-width: 500px) {
.form .column {
flex-wrap: wrap;
}
/*trying to style the button to be wrapped */
.upload .up {
flex-wrap: wrap;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Form</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
<!--Signaure pad link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>
<body>
<section class="container">
<h1>Site Report Sheet</h1>
<form action="#" class="form">
<div class="row">
<div class="column">
<label for="issue">Client details</label>
<textarea id="issue" placeholder="" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="column">
<label for="issue">Site Name & Address</label>
<textarea id="issue" placeholder="" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="column">
<label for="number">WIS Number</label>
<input type="text" id="number" placeholder="">
</div>
<div class="input-box">
<label>Date</label>
<input type="date" required/>
</div>
</div>
<div class="row">
<div class="column">
<label for="issue"></label>
<textarea id="issue" placeholder="Type here" rows="3"></textarea>
</div>
</div>
<h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>
<div class="row">
<div class="column">
<label for="name">Name</label>
<input type="text" id="name" placeholder="">
</div>
<!--Signature pad-->
<div class="flex-row">
<div class="wrapper">
<canvas id="signature-pad" width="400" height="200"></canvas>
</div>
<div class="clear-btn">
<button id="clear"><span> Clear </span></button>
</div>
</div>
<div class="row">
<div class="column">
<label for="number">On behalf of</label>
<input type="text" id="number" placeholder="">
</div>
</div>
<div class="column">
<label for="ename">Engineers Name</label>
<input type="text" id="ename" placeholder="">
</div>
<div class="column">
<label for="ename">Engineers Name</label>
<input type="text" id="ename" placeholder="">
</div>
</div>
</form>
</section>
</div>
</body>
</html>`I am having some issues with the container on a job sheet I am making for work. I am brand new to this and have been learning as I go, following instructions online, and have done a few others that work but can't figure out why this one has gone so wrong. When I inspect this form in Live Server in mobile view the screen misses a lot of the page. See Below examples of the view from Iphone & Samsung, doesn't let me see the top of the page... Samsung Galaxy - can't see top of page
Iphone XR cuts off sides of form
I tried setting a 'top' style to the container and set it to 80%, which helped a little but the bottom is still cut off. I then tried adding a 'bottom' and played around with the percentage but it made it worse.. I individually played around with the styles of the container but nothing affected it being cut off. I also tried changing the body styling. Tried to changing Width and Height to max-width and max-height. I've tried changing all the width's & heights from px to %...Changed overflow to auto..
Your code mixes two methods of centering: flexbox plus center settings on body and absolute position with according left/top/transform settings on .container. The latter will cause the contents to go above the upper margin of the window if the window/screen is too small to fit everything into it, and is actually superfluous when taking in account the flex settings of body. So just delete these from .container:
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top: 80%;
Here's your snippet withhout those settings:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
padding: 0;
box-sizing:border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #ececec;
}
.container{
background-color: #ffffff;
min-width: 80%;
overflow: auto;
max-height:min-content;
height:auto;
padding: 3%;
border-radius: 1%;
box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}
.container .form {
margin-top: 30px;
}
.form .input-box {
width: 100%;
margin-top: 2%;
}
.input-box label {
color: #333;
}
.form :where(.input-box input, .select-box,) {
position: relative;
height: 50px;
width: 100%;
outline:none;
font-size: 1rem;
color: #707070;
margin-top: px;
border: 2px solid #ddd;
border-radius: 1px;
padding: 0 15px;
}
h1{
font-size: 30px;
text-align: center;
color: #1c093c;
}
p{
position: relative;
margin: auto;
width: 100%;
text-align: center;
color: #606060;
font-size: 14px;
font-weight: 400;
}
form{
width: 100%;
position: relative;
margin: 30px auto 0 auto;
}
.row{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
grid-gap: 20px 30px;
margin-bottom: 20px;
}
label{
color: #1c093c;
font-size: 14px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.flex-row {
display: flex;
}
.wrapper {
border: 1px solid #4b00ff;
border-right: 0;
}
canvas#signature-pad {
background: #fff;
width: 100%;
height: 100%;
cursor: crosshair;
}
button#clear {
height: 100%;
background: #4b00ff;
border: 1px solid transparent;
color: #fff;
font-weight: 600;
cursor: pointer;
}
button#clear span {
transform: rotate(90deg);
display: block;
}
textarea,
input{
width: 100%;
font-weight: 400;
padding: 8px 10px;
border-radius: 5px;
border: 1.2px solid #c4cae0;
margin-top: 5px;
}
textarea{
resize: none;
}
textarea:focus,
input:focus{
outline: none;
border-color: #6f6df4;
}
button{
border: none;
padding: 10px 20px;
background: linear-gradient(
130deg,
#6f6df4,
#4c46f5
);
color: #ffffff;
border-radius: 3px;
}
@media screen and (max-width: 500px) {
.form .column {
flex-wrap: wrap;
}
/*trying to style the button to be wrapped */
.upload .up {
flex-wrap: wrap;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Form</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
<!--Signaure pad link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>
<body>
<section class="container">
<h1>Site Report Sheet</h1>
<form action="#" class="form">
<div class="row">
<div class="column">
<label for="issue">Client details</label>
<textarea id="issue" placeholder="" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="column">
<label for="issue">Site Name & Address</label>
<textarea id="issue" placeholder="" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="column">
<label for="number">WIS Number</label>
<input type="text" id="number" placeholder="">
</div>
<div class="input-box">
<label>Date</label>
<input type="date" required/>
</div>
</div>
<div class="row">
<div class="column">
<label for="issue"></label>
<textarea id="issue" placeholder="Type here" rows="3"></textarea>
</div>
</div>
<h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>
<div class="row">
<div class="column">
<label for="name">Name</label>
<input type="text" id="name" placeholder="">
</div>
<!--Signature pad-->
<div class="flex-row">
<div class="wrapper">
<canvas id="signature-pad" width="400" height="200"></canvas>
</div>
<div class="clear-btn">
<button id="clear"><span> Clear </span></button>
</div>
</div>
<div class="row">
<div class="column">
<label for="number">On behalf of</label>
<input type="text" id="number" placeholder="">
</div>
</div>
<div class="column">
<label for="ename">Engineers Name</label>
<input type="text" id="ename" placeholder="">
</div>
<div class="column">
<label for="ename">Engineers Name</label>
<input type="text" id="ename" placeholder="">
</div>
</div>
</form>
</section>
</div>
</body>
</html>BTW: Applying 20% margin to all elements (using the * selector) is definitely not a good idea! I erased it from the code above.