Jump to content
Sign in to follow this  
bsmither

Grids in Documents

Recommended Posts

There is a comment that showing a list of images is wanting to be in a responsive grid. But, using a <table> isn't going to work, and other attempts to get everything lined up wasn't working out so well.

https://features.cubecart.com/topic/option-for-documents-to-inherit-foundation-grid-templates

If using the Foundation skin, we can use the block-grid set of CSS rules.

When at the document editor, switch it to Source mode. A <style> tag needs to be added.

<style>
#doc-image-grid > li img {
  margin: 0 auto;
  display: block;
}
#doc-image-grid.large-block-grid-4 > li {
  padding: 0 5px 10px;
}
</style>

<ul id="doc-image-grid" class="large-block-grid-4 medium-block-grid-2 small-block-grid-1">
	<li><img src="skins/foundation/images/examples/pic1.jpg" title="Message One" /></li>
	<li><img src="skins/foundation/images/examples/pic2.jpg" title="Message Two" /></li>
	<li><img src="skins/foundation/images/examples/pic3.jpg" title="Message Three" /></li>
	<li><img src="skins/foundation/images/examples/pic4.jpg" title="Message Four" /></li>
	<li><img src="skins/foundation/images/examples/pic5.jpg" title="Message Five" /></li>
	<li><img src="skins/foundation/images/examples/pic6.jpg" title="Message Six" /></li>
	<li><img src="skins/foundation/images/examples/pic7.jpg" title="Message Seven" /></li>
	<li><img src="skins/foundation/images/examples/pic8.jpg" title="Message Eight" /></li>
</ul>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×