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 a two column-layout instead of four columns *!*/
  28 /*@media screen and (max-width: 50px) {*/
  29 /*      .column {*/
  30 /*              -ms-flex: 50%;*/
  31 /*              flex: 50%;*/
  32 /*              max-width: 50%;*/
  33 /*      }*/
  34 /*}*/
  35
  36 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  37 @media screen and (max-width: 150px) {
  38         .column {
  39                 -ms-flex: 100%;
  40                 flex: 100%;
  41                 max-width: 100%;
  42         }
  43 }