html - Window is not getting responsive in small devices -
i using bootstrap web page, works in large devices when check in small devices can see space , horizontal scrolling not required. confused if table using creating problem or grid . attaching live website link view app
when see live page , in small width screen there horizontal scroll, not getting if table overflowing or div area, it's want know how remove horizontal scroll
and providing code :
<!doctype html> <html> <head> <title>god among computers</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="icon" href="images/favicon.png" type="image/x-icon"/> <script src="script/script.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body background="images/bg.jpg"> <div class="container"> <nav style = "background-color: #2980b9; border-color: none;" class="navbar navbar-default"> </nav> <div class="row"> <div class="col-md-2 col-xs-12"> </div> <div class="col-xs-12 col-md-8"> <div class="row"> <div style="background-color: white;" class="col-xs-7"> <div class="row" style="padding: 5px;"> <center> <h1>i can <img style="width:10%" class="img-responsive" src="images/read.png"> mind</h1></center> <h4>how works</h4> <ul > <li style="font-family: 'fonarto'">take 2 digit number, example : 34 </li> <li style="font-family: 'fonarto'">add digits. example: 3+4=7</li> <li style="font-family: 'fonarto'">subtract sum original number. example: 34-7=27</li> <li style="font-family: 'fonarto'">search number in emoticon table.</li> <li style="font-family: 'fonarto'">remeber symbol next result.</li> <li style="font-family: 'fonarto'">concentrate on found emoticon.</li> <li style="font-family: 'fonarto'">click on mind icon amazed.</li> <li style="font-family: 'fonarto'">want more? click on try again</li> </ul> <center> <img id="result" class="img-responsive" style="display: none;"><br> <img class="img-responsive" id="refresh" src="images/tryagain.jpg" style="width: 50%; display: none" onclick="window.location.reload();"> <div id="btn"> <span style="font-family: 'fonarto'"> <b>click me !!</b></span> <img class="img-responsive" src="images/mind.png" style="width: 50%;"></div> </center> </div> </div> <div class="col-xs-5"> <table class="table table-responsive table-sm" style="background-color:white;"> <?php $symbol = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png']; shuffle($symbol); echo '<tbody><tr>'; ($i=1; $i <= 100; $i++) { if ($i%9==0) { echo '<td id = '.$i.'>'.$i.': <img src=images/symbol/'.$symbol[0].'></td>'; } else{ echo '<td id = '.$i.'>'.$i. ': <img src=images/symbol/'.$symbol[$i%10].'></td> '; } if($i%5==0){ echo'</tr><tr>'; } } echo '</tbody>'; ?> </table> </div> </div> </div> <div class="col-md-2 col-xs-12"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- auto responsive --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4256692395717993" data-ad-slot="2241707869" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </body> </html>
use 'table-condensed' class in table
Comments
Post a Comment