Home CSS div moves down as I expand browser width
Reply: 2

CSS div moves down as I expand browser width

Hancs
1#
Hancs Published in 2018-01-13 09:23:18Z

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.

Lakindu Gunasekara
2#
Lakindu Gunasekara Reply to 2018-01-13 09:37:13Z

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>

sarvesh
3#
sarvesh Reply to 2018-01-13 09:37:09Z

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; }
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.32307 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO