I'm in need of assistance with creating a website specifically for mobile devices and tablets. The issue I am facing is that when I expand my browser width to a tablet size, the "loginD" div shifts downwards - view this gif
Below is my HTML code:
<body>
<div id="bodyD">
<div id="headD">
<h1><App Name</h1>
</div>
<div id="loginD">
<form runat="server" name="form1">
<h2>Login</h2><br />
<asp:Label ID="lblUsername" runat="server" Text="Account No" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtUsername" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtPassword" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Login" CssClass="aspText" />
</form>
</div>
</div>
And here is my CSS code:
\* {
margin: 0;
padding: 0; }
body {
width: 100%;
height: 100vh; }
#bodyD {
background-color: #fff;
width: 100%;
height: 100%; }
#headD {
background-color: #414344;
height: 15%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
#headD h1 {
position: absolute;
color: #dedfe0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 35px;
margin-left: 5%;
margin-right: 5%;
padding-top: 5% }
#loginD {
padding-top: 75%;
margin-left: 5%;
margin-right: 5%;
position: relative; }
#loginD h2 {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 30px;
}
#loginD .aspLabel {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
}
#loginD .aspText {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
width: 100%;
border-radius: 5px;
border: 1px grey solid;
/*background: none;*/
-webkit-appearance: none;
}
#btnSubmit {
color: #afafaf;
margin-top: 10px;
border: 1px grey solid;
background: none;
-webkit-appearance: none; }
Apologies for the formatting issue with the block code, I aim to keep the elements at equal heights while only expanding the width, which seems to be functioning correctly.