0

when I resize my page down to mobile view so that it's one box per row I don't have any padding between areas so currently they all bleed into one - is there anyway I can fix this and add a gap between them?

http://jsfiddle.net/4v3u4/7/

<div class="container">
<div class="row">
  <div id="equalheight">      

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">

            <div class="test">  

                <div class="info-block"><!-- BODY BOX-->
                    <p>one line of copy</p>
                </div>

            </div>              
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="test">    
              <div class="info-block"><!-- BODY BOX-->                
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>
      </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>              

      </div>
  </div><!--/row-->
  <hr>
  <div class="row">
      <div id="equalheight">      

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>              

      </div>
   </div><!--/row-->
</div>




body {
margin: 0;
font-size: 15px;
color: #005f6b;
background-color: #ddeaf3;
padding-top: 72px;
}

.navbar-brand {
  float: left;
  display: block;
  padding: 0px 20px 0px;
  margin-left: -20px;
  font-size: 24px;
  line-height: 40px;
  color: #53564e;
  text-shadow: 2px 2px 1px #fff;
  text-transform: uppercase;
  font-weight: 400;
}

/* Top Navigations links styles */
#top-navigation > ul.nav > li > a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 18px;
}

.demo{
    //background-color:#000;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#equalheight {
    overflow: hidden; 
}

.test{
    background-color:#efefef;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.info-block{
    padding: 14px;
}

Any help appreciated, cheers

Ryan Michael
  • 257
  • 1
  • 3
  • 6

1 Answers1

2

You have to alter the behavior of the test class, in the bootstrap media queries. I add

@media(max-width:767px){
    .test{
        margin: 15px 0px;
        padding: 0px
    }
}

to the end of the Css, and it work. fiddle

But is there a reason why you use?

margin-bottom: -99999px;
padding-bottom: 99999px;
ZimTis
  • 179
  • 9
  • Thanks for this. The reason I'm using the 99999 was to get the boxes in a row to be of equal height. I tried using a jQuery plugin (equalHeights) but I couldn't get it to update on window.resize or when I was doing an ajax update. The thread where somebody suggested the above is here > http://stackoverflow.com/questions/19819816/bootstrap-3-trying-to-create-columns-with-equal-heights – Ryan Michael Nov 07 '13 at 11:13