Jesy Jesy - 1 year ago 166
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 -->
<!-- /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 -->
<!-- /Module HomeSlider --><!-- Static Block module -->
<div id="slider-wrapper" class="wt-col-md-3 wt-col-sm-3">
<p><img src="" class="img-responsive" alt="Free Delivery" width="200" height="174"></p>
<p><img src=" PR.png" class="img-responsive" alt="100% Genuine" width="200" height="144"></p>
<p><img src="" class="img-responsive" alt="Payment Methods" width="200" height="157"></p>
<!-- /Static block module -->

Answer Source

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


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.

Good Luck!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download