html5 - Bootstrap 3 RC1 responsive fluid grid system breakpoint issues -
i have designed website testing bootstrap 3 rc1. have 4 grid in row(12 grid / 4 =col-3) , when tried minimize small-display area of grids-row not going second line has scaling-up same row.
my site : http://goo.gl/zcn8ri
for example below code, have used class="col-2 col-sm-1 col-lg-3", need in large display grid should display '3-col' , small display should 2 col(line-break) not happening ...
<div class="row"> <div class="col-2 col-sm-1 col-lg-3"> <div class="pc-area"> <center> <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" alt="pc laptop"></span></a> </center> </div> </div> <div class="col-2 col-sm-1 col-lg-3"> <div class="mac-area"> <center> <a href="#"><span class="area-positions"><img src="images/mac-macbook.png" alt="mac"></span></a> </center> </div> </div> <div class="col-2 col-sm-1 col-lg-3"> <div class="iphone-area"> <center> <a href="#"><span class="area-positions"><img src="images/iphone.png" alt="iphone"></span></a> </center> </div> </div> <div class="col-2 col-sm-1 col-lg-3"> <div class="ipad-area"> <center> <a href="#"><span class="area-positions"><img src="images/ipad.png" alt="ipads"></span></a> </center> </div> </div> </div>
also background not looking in small display.
please suggest.
thanks!!!
just remove col-2 , below
<div class="row"> <div class="col-sm-3 col-lg-3"> <div class="pc-area item"> <center> <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" class="img-responsive" alt="pc laptop"></span></a> </center> </div> </div> <div class="col-sm-3 col-lg-3"> <div class="mac-area item"> <center> <a href="#"><span class="area-positions"><img src="images/mac-macbook.png" class="img-responsive" alt="mac"></span></a> </center> </div> </div> <div class="col-sm-3 col-lg-3"> <div class="iphone-area item"> <center> <a href="#"><span class="area-positions"><img src="images/iphone.png" class="img-responsive" alt="iphone"></span></a> </center> </div> </div> <div class="col-sm-3 col-lg-3"> <div class="ipad-area item"> <center> <a href="#"><span class="area-positions"><img src="images/ipad.png" class="img-responsive" alt="ipads"></span></a> </center> </div> </div> </div>
also in css
.pc-area { background: url(images/pc-laptop-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .mac-area { background: url(images/mac-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .iphone-area { background: url(images/iphone-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .ipad-area { background: url(images/ipad-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .ipod-area { background: url(images/ipod-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .galaxy-area { background: url(images/galaxy-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .macpro-area { background: url(images/macpro-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; } .business-area { background: url(images/web-business-area.png) no-repeat scroll 0 0 transparent; min-height: 225px; max-width: 100%; height: auto; }
so medium layout looks great , better not put image text pallets...
Comments
Post a Comment