www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css

   1 /**
   2  * @file
   3  * This file is used to create a 4 column grid layout.
   4  */
   5
   6 .grid--4 .views-row {
   7   margin-bottom: 28px;
   8   padding: 0 14px;
   9 }
  10
  11 @media screen and (min-width: 30em) {
  12   .grid--4 {
  13     overflow-x: hidden;
  14   }
  15   .grid--4 .view-content {
  16     display: flex;
  17     flex-wrap: wrap;
  18     margin: 0;
  19   }
  20
  21   .grid--4 .views-row {
  22     display: flex;
  23     flex: 0 0 calc(50% - 28px);
  24     margin: 0 14px 28px;
  25     padding: 0;
  26   }
  27 }
  28
  29 @media screen and (min-width: 60em) {
  30   .grid--4 .views-row {
  31     flex: 0 0 calc(25% - 28px);
  32   }
  33 }
  34
  35 /* 77em == the max width of .container + 1em either side */
  36 @media screen and (min-width: 77em) {
  37   .grid--4 .view-content {
  38     margin-left: -14px;
  39     margin-right: -14px;
  40   }
  41 }