bsmither Posted November 4, 2018 Share Posted November 4, 2018 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.