Jesy Jesy - 4 months ago 30
CSS Question

Bootstrap 3 grids

Can somebody help me in removing the extra white space (column) on the rightmost part of my website. I have divided the row on wt-col-sm-3, wt-col-sm-6, wt-col-sm-3 columns but there's an extra white column wise space which I want to remove. I've tried a lot of options and changed css. But nothing seems to be working.



<div id="slider_row">
<div class="container">
<div class="row">
<!-- Module Megamenu-->
<div id="wt-menu-ver-left" class="wt-menu-ver-left wt-col-sm-3 wt-col-md-2">
<div class="title-menu-mobile category-title"><span>Category</span></div>
<div class="category-left" style="display: block;">
<ul class="menu-content">
<li class="level-1 parent">
<!-- All categories listings mobiles and accessories,tablets,laptops,Desktops &Monitors,Laptop Battery & charger -->
</li>
</ul>
</div>
</div>
<!-- /Module Megamenu --><!-- Module HomeSlider -->
<div id="slider-wrapper" class="wt-col-md-6 wt-col-sm-6">
<div id="layerslider" style="visibility: visible; width: 538px; height: 395.588px;" class="ls-container ls-v5">
<!--Mac book advertisement contents -->
</div>
</div>
<!-- /Module HomeSlider --><!-- Static Block module -->
<div id="slider-wrapper" class="wt-col-md-3 wt-col-sm-3">
<p><img src="http://www.m.com/img/cms/freedel.jpg" class="img-responsive" alt="Free Delivery" width="200" height="174"></p>
<p><img src="http://www.m.com/img/cms/GENUINE PR.png" class="img-responsive" alt="100% Genuine" width="200" height="144"></p>
<p><img src="http://www.m.com/img/cms/pay1.png" class="img-responsive" alt="Payment Methods" width="200" height="157"></p>
</div>
<!-- /Static block module -->
</div>
</div>
</div>




Answer

A. you did not distributed your columns in a proper way since you have wt-col-md-2 + wt-col-md-6 + wt-col-md-3 for medium devices which gives 11 whereas bootstrap based on 12 grid layout system. Therefore you could try to do like this:

wt-col-md-2 + wt-col-md-7 + wt-col-md-3

or

wt-col-md-2 + wt-col-md-8 + wt-col-md-2

to fill whole width of a row.

B. I noticed that the width of your columns in wt-grid.scss file were calculated wrong, because two column layout, wt-col-md-2 has width of 19.14529% and if you multiply it by 6 in order to get 12 column layout you will have a 114.87% instead of needed 100%. Moreover I did not find width for wt-col-md-6 and wt-col-md-7 classes, they were missing.

http://screencast.com/t/D9elhv9n

http://screencast.com/t/shwRKflSUq6

Good Luck!

Comments