CODEWITHSUNDEEP
htmlcssasp.net
Hancs
Hancs

Reputation: 323

CSS div moves down as I expand browser width

I need help, I am trying to make a website for mobile devices/tablets but the problem is that as soon as I expand my browser width to a tablet size the "loginD" div moves down - see this gif

Here is my html

<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>

here is my css

\* {
    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; }

Sorry this thing messed up the block code, I need the elements to stay the same height, only the width should expand which is working.

Upvotes: 1

Views: 148

Answers (2)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Check this code snippet. On your local environment.

\* {
  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: 5rem;
  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;
}
<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>

Upvotes: 1

sarvesh
sarvesh

Reputation: 682

hey change the height option from % to px The fixed pixel will work best. The % is always works with the viewport of device so try using px insted of % 

#headD {
    background-color: #414344;
    height: 25px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; }

Upvotes: 0

Related Questions