Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Grid Padding - Image Gallery #1243

Closed
brancusi opened this Issue Dec 2, 2012 · 1 comment

Comments

Projects
None yet
2 participants

brancusi commented Dec 2, 2012

Hi,

I'm trying to create an 4x4 image gallery with foundation without any gaps between the images.

I'm using the following:

<div class="row collapse">
    <ul class="block-grid four-up mobile-two-up no-bullet">
        <li class="project-thumbnail">
            <img src="img/sample.jpg"/>
        </li>
    </ul>
</div>

This works fine BUT, the only way to get rid of the padding is as follows:

.block-grid.four-up > li.project-thumbnail {
  padding: 0;
  line-height: 0;
}

if I try to use:

.project-thumbnail {
  padding: 0;
  line-height: 0;
}

It doesn't work. Any ideas? It seems like I'm missing something here. I just want zero gap between items.

You are getting the padding because of the use of block-grid. The collapse class gets rid or normal columns/row padding, but it wasn't designed for use with the block-grid. Your solution is the right solution at this point. You could have alternatively used a nested row with 4 sets of "3 columns" next to each other inside the collapse class.

@ghost ghost assigned hatefulcrawdad Dec 5, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment