Footer and container inside each other when I'm on small sized screen
Question
I've created a login page, everything seems normal when the page is maximized but when I'm on xs and sm sized screen my footer and content area goes inside of each other and there's a gap at the bottom how may I solve this problem?
https://jsfiddle.net/tLhy3av1/
Full Code:
.navbar-default.navbar-fixed-top { background-color: #FFFFFF; border-color: #E7E7E7; font-family: gesta; font-size: 20px; padding-bottom: 10px; } .container.top { margin-top: 50px; } .navbar-header.topHeader { margin-left: 50%; } .mid { width: 100%; height: 497px; background-color: #F1F2F4; margin-top: 110px } .myFooter { margin-bottom: 0px; width: 100%; height: 50px; background-color: #2F2F2F; border-top: 2px inset #F1F2F4; } .formSignIn { width: 25%; height: 100%; margin: 60px auto 30px auto; } .form-signin-heading { color: #8F95A3; font-weight: 400; } .btn { font-size: 1.1em; background-color: #F04B14; border: 1px solid #CE3D0D; background-color: #f04b14; box-shadow: 0px -1px 0px #CE3D0D inset; border-radius: 0; text-align: center; } .btn:hover { background-color: #F04B14; box-shadow: 0px -1px 0px #CE3D0D inset; border: 1px solid #CE3D0D; background-color: #F47E57; } .forget { margin-top: 10px; float: right; } a { font-weight: 400; color: #2693CE; } a:hover { font-weight: 400; color: #2693CE; } .checkbox { display: inline-block; } .formSignIn p { margin-top: 30px; text-align: center; } #name { text-align: center; color: #8F95A3; font-family: arial; font-weight: 400px; font-size: 15px; } #bottomLinks a { text-decoration: none; color: #8F95A3; font-family: arial; font-weight: 400px; } #bottomLinks a:hover, bottomLinks a:focus, bottomLinks a:active { text-decoration: underline; color: #535865; font-family: arial; font-weight: 400px; } .break { clear: both; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <body> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container top"> <div class="navbar-header topHeader"> <a class="navbar-brand" href="index.html">Logo</a> </div> </div> </nav> <div class="container mid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <form class="form-signin formSignIn"> <h4 class="form-signin-heading">Log in</h4> <br> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <br> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <br> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="checkbox"> <label> <input type="checkbox" value="remember-me">Remember me </label> </div> <div class="forget"> <a href="">Forgot password?</a> </div> </div> </div> <br> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <p>Not a member yet? <a href="http://www.yahoo.com"> Sign Up</a> </p> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <p id="name">© Biz Yapalım <span id="bottomLinks"> <a href="http:/www.google.com">Privacy</a> <a href="http://www.google.com"> Terms</a></span> </div> </div> </form> </div> </div> </div> <div class "break"> </div> <footer class="container myFooter"> </footer> <!--Javascript--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </body>
1 answers
solution1
0 2015-10-08 09:35:47
On your form set width to px or some other fixed value since percentage is from the width of a window and will always be a trouble:
.formSignIn {
width: 200px; // 25%
}
Beside that, since you are covering more resolutions set some properties through media queries where you can stay with % value.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do i make make a div inside a container have an image that is sized like its other div siblings?
Make image scale with parent container when screen is re-sized
Bootstrap 4: Use block level buttons on navbar menu on small screen but keep normal sized button when expanded
How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?
How can I stack two same-sized canvas on top of each other, next to another canvas?
How do I get the boxes to align underneath each other when the screen shrinks (responsive)
How do I create a footer that will stick to the bottom of the screen regardless of the container height?
header and footer elements must be inside the .container?
How can I make two divs within the same parent container scroll independently of each other?
How do I make a div element float out of its container, when the tag is inside the container
Related Tags