this question has answer here:
i using simple half bootstrap / half designed login template. opens should through web browser:
but when open through mobile device loads way:
and want open in close-up way that:
now here html , css:
body { background: #eee !important; } .form-signin { max-width: 380px; padding: 15px 35px 30px; margin: 20px auto; background-color: #fff; border: 1px round rgba(0, 0, 0, 0.1); } .form-signin .checkbox { margin-bottom: 30px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; } .form-signin-heading { color: #777; } .social-box{ margin: 0 auto; padding: 20px 38px 0 38px; } .social-box a{ font-weight:bold; font-size:18px; padding:8px; } .social-box i{ font-weight:bold; font-size:20px; } .newborder { border-bottom: 1px #ccc solid; margin-top: 30px; margin-bottom: 30px; } .omb_loginor { position: relative; font-size: 1.5em; color: #aaa; margin-top: 1.5em; margin-bottom: 2.2em; padding-top: 0.5em; padding-bottom: 0.5em; } .omb_loginor .omb_hror { background-color: #cdcdcd; height: 1px; margin-top: 0 !important; margin-bottom: 0 !important; } .omb_loginor .omb_spanor { display: block; position: absolute; left: 50%; top: -0.3em; margin-left: -1.5em; background-color: white; width: 3em; text-align: center; }<!doctype html> <html > <head> <meta charset="utf-8"> <title>bootstrap snippet: login form</title> <link rel="stylesheet" href="css/lstyle.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="form-signin"> <form> <h2 class="form-signin-heading text-center"><i class="fa fa-tint fa-fw"></i>hello</h2> <div class="social-box"> <div class="row mg-btm"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-block"> <i class="fa fa-facebook fa-fw"></i> log in </a> </div> </div> </div> <div class="newborder"></div> <input type="text" class="form-control" name="username" placeholder="e-mail" required="" autofocus="" /> <input type="password" class="form-control" name="password" placeholder="password" required=""/> <label class="checkbox text-right"> <input type="checkbox" value="remember-me" id="rememberme" name="rememberme"> remember me </label> <button class="btn btn-lg btn-info btn-block" type="submit">log in</button> </form> <div class="row omb_loginor "> <hr class="omb_hror"> <span class="omb_spanor">or</span> </div> <form> <div class="alert alert-info"><p>no registration?</p></div> <input type="text" class="form-control" name="username" placeholder="e-mail" required="" autofocus="" /> <input type="password" class="form-control" name="password" placeholder="password required=""/> <button class="btn btn-lg btn-info btn-block" type="submit">register me & log in</button> </form> </div> </div> </body> </html>huge in advance!
put <meta name="viewport" content="width=device-width, initial-scale=1"> in <head> section. wil make page fit screen correctly. hope helps.
Comments
Post a Comment