html - How to fix bootstrap body -
i have created sample website using bootstrap when try re size window or open site on mobile right side of site stick border of screen can view site on chaddi.tk
html here
<!doctype html> <html lang="en"> <head> <title>title!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="mystyle.css" /> </head> <body> <input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label> <link rel="stylesheet" type="text/css" href="mystyle.css"/> <nav id="navigation1" class="navigation"> <ul> <li><a href="#">home</a> <span class="glyphicon glyphicon-home" aria-hidden="true"></span></li> <li><a href="#contact" data-toggle="modal">contact me</a> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></li> <li><a href="#">about me</a> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></li> </ul> </nav> <div class="page-header"> <h1>example page header</h1> <!--practical name , number --> </div> <div class="table-responsive" id="main_table"> <table class="table table-hover"> <thead> <tr> <th class="text-center">no.</th> <th class="text-center">name</th> <th class="text-center">download</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td class="text-center">xxxx</td> <td class="text-center"><a href="download/1.jpg" download="tt.png"><button type="button" class="btn btn-success">download</button></a></td> </tr> <tr> <td class="text-center">2</td> <td class="text-center">yyyy</td> <td class="text-center"><a href="download/2.jpg" download="tt.png"><button type="button" class="btn btn-success">download</button></a></td> </tr> <tr> <td class="text-center">3</td> <td class="text-center">zzzzz</td> <td class="text-center"><a href="download/3.jpg" download="tt.png"><button type="button" class="btn btn-success">download</button></a></td> </tr> </tbody> </table> </div> <!-- modal starts here --> <div class="modal fade" id="contact" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal" method="post" action="send.php"> <div class="modal-header"> <h1>contact me </h1> </div> <div class="modal-body"> <div class="form-group"> <label for="contact-name" class="col-sm-2 control-label">name:</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" id="contact-name" placeholder="full name"> </div> </div> <div class="form-group"> <label for="contact-email" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" id="contact-email" placeholder="you@example.com"> </div> </div> <div class="form-group"> <label for="contact-msg" class="col-sm-2 control-label">message:</label> <div class="col-sm-10"> <textarea name="msg" class="form-control" rows="8"></textarea> </div> </div> </div> <div class="modal-footer"> <a href="https://www.facebook.com/shubhamdeshmukh193" target="_blank"><img class="pull-left" src="images/fb.png" alt="contact on facebook" style="width:30px;height:30px;"></a> <a type="button" class="btn btn-default" data-dismiss="modal">close</a> <button class="btn btn-primary" type="submit">send</button> </div> </form> </div> </div> </div> <!-- till here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> css here
.burger { display: inline-block; border: 0; background: none; outline: 0; padding: 0; cursor: pointer; border-bottom: 4px solid currentcolor; width: 28px; transition: border-bottom 1s ease-in-out; -webkit-transition: border-bottom 1s ease-in-out; } .burger::-moz-focus-inner { border: 0; padding: 0; } .burger:before { content: ""; display: block; border-bottom: 4px solid currentcolor; width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger:after { content: ""; display: block; border-bottom: 4px solid currentcolor; width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger-check { display: none; } .burger-check:checked ~ .burger { border-bottom: 4px solid transparent; transition: border-bottom 0.8s ease-in-out; -webkit-transition: border-bottom 0.8s ease-in-out; } .burger-check:checked ~ .burger:before { -ms-transform: rotate(-405deg) translatey(1px) translatex(-3px); transform: rotate(-405deg) translatey(1px) translatex(-3px); -webkit-transform: rotate(-405deg) translatey(1px) translatex(-3px); transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger-check:checked ~ .burger:after { -ms-transform: rotate(405deg) translatey(-4px) translatex(-5px); transform: rotate(405deg) translatey(-4px) translatex(-5px); -webkit-transform: rotate(405deg) translatey(-4px) translatex(-5px); transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .navigation { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .burger-check:checked ~ .navigation { max-height: 500px; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } body { background-color: #e9e9e9; font-family: 'libre baskerville', serif; font-size: 30px; display:center; padding-top:10px; padding-left:10px; padding-right:10px; } { color: inherit; } small { font-size: 14px; } ul { margin: 0; padding: 0; } li { list-style: none; font-size: 25px; padding: 5px 0; } li { text-decoration: none; } li a:hover { text-decoration: underline; } h1{ font: bold; text-align: center; } .table { padding-left: 50px; padding-right:50px; } #main_table{ float: center; width: 900px auto; margin: 30px; border-top: 2px solid #808080; border-bottom: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #808080; } .modal { text-align: center; font-size: 70%; } .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } html, body {width: 100%;} i new stuff if u find error plz tell me solution
please enclose header , table inside .container class , remove margin #main_table id mystyle.css
Comments
Post a Comment