Here's a simple trick to create multi-columns of content that will collapse into a single column on mobile devices (narrow screens) using a responsive design table. Can be used to display a grid of videos or images or the same size or for list of text when you wish to eliminate excessive white space. This pattern can be used in a full-width or multi-column display template.

To create this pattern:

  1. Create a table of two (or more) columns and the desired number of rows. (Do not use table headers.)
  2. Clear out any widths or borders for your table.
  3. Using the style dropdown, give your table the style of "responsive2."
  4. Populate your table with the desired content.
  5. Add the following style block to the source to remove the borders:
    <style type="text/css">table.responsive2 td {border:none !important;}</style>
  6. For images, use files with the same pixel dimensions to retain the clean grid pattern.
  7. For videos, enclose the iFrame in a div with the class "video-container." (If your table with videos has empty cells, fill the cell with an empty iFrame.)
    <div class="video-container"><iframe></iframe></div>
  8. For text, set your table cell properties to vertical align top.

Examples provided.

Video Example

 

Text Example

Former UVM Presidents

  • Tom Sullivan
  • Daniel Mark Fogel
  • Judith A. Ramaley
  • Thomas P. Salmon
  • George H. Davis

Former Governors of Vermont

  • Peter Shumlin
  • Jim Douglas
  • Howard Dean
  • Richard A. Snelling
  • Madeleine Kunin

 

Image Example

Tip your capSmiling graduateTulips bloom with the green in view