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