Menu icon Foundation
BLOCK GRID ALIGNMENT PROBLEM

Prob

Orignal

Hi,

in first image having 23 px gaping is too much for my requirement .

here is my code

and 2nd image having 10px gaping in all the list how can i do 10 px. in between the list

please help me ..

thanks,

           <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-3">
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
      <li class="hide-for-small hide-for-large"><img src="" alt=""></li>
 </ul>
  

         

block grid

Prob

Orignal

Hi,

in first image having 23 px gaping is too much for my requirement .

here is my code

and 2nd image having 10px gaping in all the list how can i do 10 px. in between the list

please help me ..

thanks,

           <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-3">
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
      <li class="hide-for-small hide-for-large"><img src="" alt=""></li>
 </ul>
  

         
Wing-Hou Chan over 5 years ago

Hey Rohitya!

Take a look at this Pen I made: http://codepen.io/winghouchan/pen/lmHxr/

Make sure the padding-right for the first li plus the padding-left for the second li equals 10 and the padding-right for the second li and the padding-left for the third li equals 10. The padding I have used is just to make the images all the same size. You may have to experiment with various degrees of padding to find the one right for you.

Ercan Murat KISACA over 5 years ago

Hello,

I didn't try in your code but this had solved my issue about padding in block-grid.

First give a class name to all li elements on block grid list.
For e.g.

           <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-3">
      <li class="blockgrid-li"><img src="" alt=""></li>
      <li class="blockgrid-li"><img src="" alt=""></li>
      <li class="blockgrid-li"><img src="" alt=""></li>
      <li class="hide-for-small hide-for-large blockgrid-li"><img src="" alt=""></li>
 </ul>

Then try adding this css to your css file

.blockgrid-li {  
        padding-left: 0 !important;
  padding-right: 0 !important; }