CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user7747472
user7747472

Reputation: 1952

bootstrap responsiveness issue on mobile devices

i am working on a website where i am using Bootstrap v3.3.7 . But the issue arises when i go to mobile view the row is going out of the screen width. and causing some issue with the design my div structure is something like this 

<div class="container">
<div class="row" id="something">
   <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" id="left-side">
       <div class="row">
         <div class="col-sm-5 col-xs-5" ></div>
         <div class="col-sm-7 col-xs-7" ></div>
        </div>
  </div>
 <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
     <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
     </div>
 </div>

</div>

can anyone help me out what is wrong with this structure and why a scroll bar is coming at the bottom of the page ? i would like to mention that when i add

#something{margin:0px}

then it fixing the issue

sorry i can't share my exact code for some specific reason. ty

Upvotes: 0

Views: 68

Answers (1)

Sangrai
Sangrai

Reputation: 687

Yes for row in bootstrap by default margin from left and right is -15px to cover the area (padding of 15px from left and right of outer div)of left and right of outer div perhaps it may be of container or any col div so if you remove this margin the structure of the site will not aligned and create a scroll bar on the bottom on mobile. So kindly remove #something{margin:0px} on mobile width. If you want to hide the scroll bar at the bottom add the css: body(overflow-x:hidden;)

If the is any other problem let me know.

Upvotes: 1

Related Questions