2

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;
}
2
  • 1) Does the error only happen when there's content inside of your fullscreen div or does it happen when all you have in your page is just the div? 2) Why aren't you just letting that image be a background image?
    – BSMP
    Feb 26, 2015 at 2:38
  • You've put all the content of your form in one label tag.
    – BSMP
    Feb 26, 2015 at 2:57

3 Answers 3

5

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>

1
  • In any case this worked better than anything else I've tried so it's something I can work with. I've checkmarked the answer. Thanks!
    – sylcat
    Feb 26, 2015 at 22:49
0

Media queries need to encompass rules, as you have it the code in the media queries is invalid and does not target anything with a selector.

The way you target mobile devices is not by any means perfect with media queries as you generally use the viewport width to do so:

@media (max-width: 600px) {
    /*Some rule(s)*/
}

So rather than targeting mobile devices, really you're targeting narrow screens/viewports.

That said, you need to insert a rule (or some rules) into your media query for it to do anything:

@media (max-width: 600px) {
    #fullscreen {
        /*Some declaration(s)*/
    }
}

Now... that said, your rule for #fullscreen already makes the <div /> element full width/height, see here: http://jsfiddle.net/5jtuqry8/. So I'm not quite sure what you are trying to do exactly.

2
  • As described, I'm just trying to get a div on a webpage (which contains a simple 224x400 image and a form on top of it) to display as fullscreen (or at least centered) on phone and tablets. My #fullscreen rule does not achieve that. The page as is loads on both phone and web-browsers with the form+image small and in the upper left.
    – sylcat
    Feb 25, 2015 at 23:08
  • Also of note, I have used declarations like the one described by al3 above, and none have had any effect to correct the issue. Thanks for the link Jasper, I'm playing with that now.
    – sylcat
    Feb 25, 2015 at 23:29
-4

Your code is a bit messy and difficult to understand, whats vh and vw?

Anyway try this, I have tided the code a bit and removed the unnecessary stuff. I added a css for mobile screens which tells it to make all inputs of the form 100% of the screen width.

<div style="position:relative">    
<img src="fbg.png" alt="" />

<div id="main">
<div id="myForm">

<form method="post" action="SMA_Send2.php">
First Name:<br />
<input type="text" maxlength="20" name="Fname" required>
<br />
Last Name:<br />
<input type="text" maxlength="36" name="Lname" required><br />
Student ID:<br />
<input type="number" maxlength="4" name="Sid" required><br />
Email:<br />
<input type="email" maxlength="36" name="Email" placeholder="Enter a valid email address" required><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:<br />
 <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></div>

CSS:

#myForm {
position:absolute;
left:0;
top:0
}

input, textarea { 
        padding: 9px; 
        margin: 5px 0;
        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; 
        margin: 5px 0;
        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(#FFF), color-stop(4%, #EEE), to(#FFF)); 
        background: -moz-linear-gradient(top, #FFF, #EEE 1px, #FFF 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; 
        }    

    submit { 
        width: 210px; 
        padding: 9px 15px;
        background: #617798; 
        border: 1; 
        font-size: 14px; 
        color: #FFF; 
        -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;
    }

    @media screen and (max-device-width: 480px){
    input, select {width:100%}
    }
2
  • 2
    vh and vw are CSS units that correspond tot he viewport. 1vh is one percent of the vertical height of the viewport. So 100vh will fill the screen viewport (screen) vertically.
    – Jasper
    Feb 25, 2015 at 22:43
  • 2
    Negative I'm afraid. All this did was introduce a bunch of formatting problems. (Form boxes out of place on pc, worse so on mobile, image and form area still only taking up about 2/3rd of the screen and off center, stuck to the left.)
    – sylcat
    Feb 25, 2015 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.