Menu icon Foundation
Block grid too tiny and wrong number of columns

Yikes!! I'm having trouble using the block grid, I'm hoping someone might be able to help me on this one.

I want to show 6 thumbnails in a row. All I can see is 3 in a row and they are shoved to the left of the web page and way too tiny. I have the code below that I'm trying to use. That 'footer-tumbled' style is just to show a background, add some padding, and center the block grid (which isn't working anyway).

It appears like the block grid is on the left of it's container, that large-12 inside the row, but the html validates so I don't see what else could be causing the problem. I've got to be missing something!

I'm attaching a screenshot below too, so you can see what I mean (hard to explain clearly.)

Hope you can help dudes!

thanks!

<div class="row">
<div class="large-12 large-centered column footer-tumbled">

<h3 class="small">RECENTLY TUMBLED</h3>
<ul class="large-block-grid-6">
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
</ul>

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

.footer-tumbled {
    background: url(images/tumblrbg.png) no-repeat center top;
	text-align: center;
	padding: 54px 0;
}

Screenshot

block grid

Yikes!! I'm having trouble using the block grid, I'm hoping someone might be able to help me on this one.

I want to show 6 thumbnails in a row. All I can see is 3 in a row and they are shoved to the left of the web page and way too tiny. I have the code below that I'm trying to use. That 'footer-tumbled' style is just to show a background, add some padding, and center the block grid (which isn't working anyway).

It appears like the block grid is on the left of it's container, that large-12 inside the row, but the html validates so I don't see what else could be causing the problem. I've got to be missing something!

I'm attaching a screenshot below too, so you can see what I mean (hard to explain clearly.)

Hope you can help dudes!

thanks!

<div class="row">
<div class="large-12 large-centered column footer-tumbled">

<h3 class="small">RECENTLY TUMBLED</h3>
<ul class="large-block-grid-6">
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
</ul>

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

.footer-tumbled {
    background: url(images/tumblrbg.png) no-repeat center top;
	text-align: center;
	padding: 54px 0;
}

Screenshot
Darrell MacLennan over 5 years ago

I get 6 images in a row using that code.

Use "text-center" as the class for your tag, then you can remove "text-align" from your CSS.

Jade over 5 years ago

WHOA That worked!! Thank you so much for your help!!!

Jade over 5 years ago

Ooops I spoke too soon, almost worked though. The whole thing is floating to the left instead of centered because of the float: left on the default style for [class*="block-grid-"] > li but if I remove the float then it stacks up instead.. I have text-center applied to the ul, then I tried applying it to either of the surrounding divs, but that didn't work.

I'm going to keep working on it, if I fix it I'll let you know.

Jade over 5 years ago

I got it to work - instead of large-6 large-centered (the div surrounding the block grid) I changed it to small-6 small-centered and now it's centered where it should be.

Thanks again!