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

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