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

CSS div moves down as I expand browser width

user2699
1#
user2699 Published in April 24, 2018, 8:30 am

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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO