html - View overlapping for small screens -


i using bootstrap grid design html pages. working fine except small screens. in small screens views overlapping below

enter image description here

i using below code

div class="container" >      <div class="row">          <div class=" col-xs-6   col-sm-offset-1      col-sm-4   col-md-offset-2 col-md-3">              <div id="poster">                  <img src="http://ia.media-imdb.com/images/m/mv5bmtk2nti1mtu4n15bml5banbnxkftztcwodg0oty0nw@@._v1_sx300.jpg">              </div>          </div>            <div class="col-sm-offset-1 col-sm-4  col-xs-6 col-md-2" >              <div id="ratingdiv">                  <label>your rating</label>                  <div id="rateyo"></div>                    <div class="editbtn">                        <button type="button"  class="btn btn-info btn-lg" data-toggle="modal" data-target="#mymodal">edit</button>                  </div>                  <div class="deletebtn">                      <button>delete</button>                    </div>                  </div>          </div>        </div>    </div>

i gave "col-xs-6" still not working. 1 tell me doing wrong.

really appreciate ideas or suggestions.

thanks in advance

you missed closing tags. here go. let me know if you've expected. 

<!doctype html>  <html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>example</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">    <link rel="stylesheet" href="/resources/demos/style.css">  </head>  <body>    <div class="container">      <div class="row">        <div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">            <img src="http://ia.media-imdb.com/images/m/mv5bmtk2nti1mtu4n15bml5banbnxkftztcwodg0oty0nw@@._v1_sx300.jpg" class="img-responsive">        </div>        <div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">          <div id="ratingdiv">            <div class="row">              <label>your rating</label>              <div id="rateyo"></div>            </div>            <div class="row">                <button type="button" class="btn btn-info btn-md">edit</button>                <button type="button" class="btn btn-danger btn-md">delete</button>            </div>         </div>       </div>   </div>  </div>  </body>  </html>


Comments

Post a Comment