I have an image that is 224w x 400h. Floated over that image is a simple form.
My goal is to make the div that encompasses that image + overlaying form to occupy the entire screen when viewed on mobile devices. I've tried various combinations using media headers, viewport meta, and tons of css that I pieced together from similar stack overflow questions. I'm currently lost on what to do next.
I also tried to at least center the img+form but I abandoned that as it doesn't center relative to mobile device screen sizes. (Rather it pushes the div off the screen and creates horizontal scrollbars as if it's considering the mobile device screen as hugely wide.)
How do I change so a mobile device will fill up its screen with my specified div? (or in the very least, center the fullsrceen div class on mobile device's smaller screens.) Any help is very appreciated!
Current html
<!DOCTYPE html>
<html>
<head>
<title>Reg</title>
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="Form.css" rel="stylesheet">
</head>
<body>
<div class="fullscreen" id="fullscreen">
<div style="position:relative">
<img src="fbg.png" alt="" />
<div style="position:absolute;left:0;top:0;">
<div id"=main">
<form method="post" action="SMA_Send2.php">
<label for="form">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit">
</label>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Current css
#fullscreen {
height: 100vh;
width: 100vw;
position:fixed;
top:0;
left:0;
}
@media screen and (orientation:portrait) { height: 100vh;
width: 100vw; }
@media screen and (orientation:landscape) {height: 100vh;
width: 100vw; }
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
I think this will be easier if you aren't trying to do this with absolute & relative positioning. If you want the image and form centered, try this:
#fullscreen {
height: 100vh;
width: 100vw;
border: 1px solid black;
background-image:url(http://placehold.it/224x400);
background-repeat: no-repeat;
background-position: center top;
}
#formDiv {
margin: auto;
width: 224px;
padding-left: 12px;
}
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}<div class="fullscreen" id="fullscreen">
<div id="formDiv">
<form method="post" action="SMA_Send2.php">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit" />
</form>
</div>
</div>