app/Resources/static/themes/material/css/media_queries.scss

   1 /* ==========================================================================
   2    Media queries
   3    ========================================================================== */
   4
   5 @media only screen and (min-width: 992px) {
   6   nav,
   7   body:not(.entry):not(.login) main,
   8   footer {
   9     padding-left: 240px;
  10   }
  11
  12   .pagination {
  13     margin-left: auto;
  14   }
  15 }
  16
  17 @media only screen and (max-width: 992px) {
  18   header,
  19   main,
  20   footer,
  21   nav {
  22     padding-left: 0;
  23   }
  24
  25   .nav-panels .action {
  26     padding-right: 0.75rem;
  27   }
  28
  29   .nav-panel-buttom {
  30     justify-content: space-between;
  31   }
  32
  33   #article {
  34     max-width: 35em;
  35     margin-left: auto;
  36     margin-right: auto;
  37     font-size: 18px;
  38
  39     > header > h1 {
  40       font-size: 1.33em;
  41     }
  42   }
  43
  44   .reader-mode {
  45     width: 240px !important;
  46
  47     span {
  48       opacity: 1;
  49     }
  50   }
  51
  52   .tabs {
  53     display: inline-block;
  54     height: auto;
  55   }
  56
  57   .tab {
  58     min-width: 100%;
  59   }
  60
  61   .indicator {
  62     display: none;
  63   }
  64
  65   .pagination li {
  66     margin-bottom: 0.5rem;
  67
  68     &.prev,
  69     &.next {
  70       width: auto;
  71     }
  72   }
  73
  74   .drag-target + .drag-target {
  75     height: 50%;
  76   }
  77
  78   .drag-target + .drag-target + .drag-target {
  79     top: 50%;
  80   }
  81 }
  82
  83 @media only screen and (min-width: 1200px) and (max-width: 1650px) {
  84   .row .col.l3 {
  85     width: 33.33333%;
  86     margin-left: 0;
  87   }
  88 }
  89
  90 @media only screen and (min-width: 993px) and (max-width: 1200px) {
  91   .row {
  92     .col.l1 {
  93       width: 25%;
  94       margin-left: 0;
  95     }
  96
  97     .col.l2 {
  98       width: 33.33333%;
  99       margin-left: 0;
 100     }
 101
 102     .col.l3 {
 103       width: 41.66667%;
 104       margin-left: 0;
 105     }
 106
 107     .col.l4 {
 108       width: 50%;
 109       margin-left: 0;
 110     }
 111
 112     .col.l5 {
 113       width: 58.33333%;
 114       margin-left: 0;
 115     }
 116
 117     .col.l6 {
 118       width: 66.66667%;
 119       margin-left: 0;
 120     }
 121
 122     .col.l7 {
 123       width: 75%;
 124       margin-left: 0;
 125     }
 126
 127     .col.l8 {
 128       width: 83.33333%;
 129       margin-left: 0;
 130     }
 131
 132     .col.l9 {
 133       width: 91.66667%;
 134       margin-left: 0;
 135     }
 136
 137     .col.l10 {
 138       width: 100%;
 139       margin-left: 0;
 140     }
 141   }
 142 }
 143
 144 @media only screen and (max-width: 350px) {
 145   .nb-results {
 146     display: none;
 147   }
 148
 149   main ul.row {
 150     padding: 0;
 151   }
 152
 153   .row .col {
 154     padding: 0;
 155   }
 156 }