Home Bootstrap responsive grid issue
Reply: 2

Bootstrap responsive grid issue

Eirik H
1#
Eirik H Published in 2015-08-14 05:29:21Z

I've setup a bootstrap grid like so:

<div class="row">

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <!-- More cols -->
</div>

The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".

It all works fine in mobile view (width < 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.

You can see it live here if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?

Lalji Tadhani
2#
Lalji Tadhani Reply to 2015-08-14 05:48:08Z

You Define min width in "#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper"

{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}

Remove this min-width.

Second Thing you add width your Custom CSS for add.css Line No.6 this width remove or add max-width & try.

.container {
margin: 0 auto;
width: 960px;}
Leo the lion
3#
Leo the lion Reply to 2015-08-14 05:56:26Z

If you are talking about 700-750px then simply remove the max-width from .container class and also from remove max-width from this #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper.

I have edited my answer but please go with lalji's answer..

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.405499 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO