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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...