Jump to content

Grids in Documents


bsmither

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>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...