view/theme/frio/css/image_grid.css

   1 * {
   2         box-sizing: border-box;
   3 }
   4
   5 .row {
   6         display: -ms-flexbox; /* IE10 */
   7         display: flex;
   8         -ms-flex-wrap: wrap; /* IE10 */
   9         flex-wrap: wrap;
  10         padding: 0 4px;
  11 }
  12
  13 /* Create four equal columns that sits next to each other */
  14 .column {
  15         -ms-flex: 50%; /* IE10 */
  16         flex: 50%;
  17         max-width: 50%;
  18         padding: 0 4px;
  19 }
  20
  21 .column img {
  22         margin-top: 8px;
  23         vertical-align: middle;
  24         width: 100%;
  25 }
  26
  27 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  28 @media screen and (max-width: 150px) {
  29         .column {
  30                 -ms-flex: 100%;
  31                 flex: 100%;
  32                 max-width: 100%;
  33         }
  34 }