Menu icon Foundation
Block grid overflowing

.img-drop-zone{
border: 1px solid black;
background: red;
}

I have a block grid, when I put a border around each li or add a background color to each li, it overflows the grid, any idea how i can fix this?

<div class="row">                        
    <div class="medium-2 columns">
        <label for="" class="right inline">Gallery:</label>
    </div>
    <div class="medium-10 columns">
       <ul class="small-block-grid-3 small-centered">
  	        <li class="img-drop-zone">a</li>
  			<li class="img-drop-zone">b</li>
  			<li class="img-drop-zone">c</li>
  			<li class="img-drop-zone">d</li>
  			<li class="img-drop-zone">e</li>
  	    </ul>
  	</div>
</div>
        
            

         

block grid

.img-drop-zone{
border: 1px solid black;
background: red;
}

I have a block grid, when I put a border around each li or add a background color to each li, it overflows the grid, any idea how i can fix this?

<div class="row">                        
    <div class="medium-2 columns">
        <label for="" class="right inline">Gallery:</label>
    </div>
    <div class="medium-10 columns">
       <ul class="small-block-grid-3 small-centered">
  	        <li class="img-drop-zone">a</li>
  			<li class="img-drop-zone">b</li>
  			<li class="img-drop-zone">c</li>
  			<li class="img-drop-zone">d</li>
  			<li class="img-drop-zone">e</li>
  	    </ul>
  	</div>
</div>
        
            

         
Esa Rantanen over 5 years ago

Hi Panthro,

try this:

<div class="row">                        
    <div class="medium-2 columns">
        <label for="" class="right inline">Gallery:</label>
    </div>
    <div class="medium-10 columns">
       <ul class="small-block-grid-3 small-centered">
            <li><div  class="img-drop-zone">a</div></li>
      <li><div  class="img-drop-zone">b</div></li>
      ... etc.
    </ul>
  </div>
</div>