MediaWiki:Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* grid container (large screen) */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'left middle2 middle2 middle2 middle2 right' 
    'left middle3 middle3 middle3 middle3 right' 
    'left footer footer footer footer footer';
} 

/* grid container (medium screen) */
@media only screen and (max-width: 1200px) {
  .grid-container  {
    grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle middle ' 
    'left middle2 middle2 middle2 middle2 middle2 ' 
    'left middle3 middle3 middle3 middle3 middle3 ' 
    'left footer footer footer footer footer';
  }
}

/* grid container (small screen) */
@media only screen and (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'middle middle middle middle middle middle' 
      'middle2 middle2 middle2 middle2 middle2 middle2' 
      'left left left left left left' 
      'middle3 middle3 middle3 middle3 middle3 middle3' 
      'footer footer footer footer footer footer';
  }
}

/* grid area location classes */
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.left {
  grid-area: left;
}
.right {
  grid-area: right;
}
.middle {
  grid-area: middle;
}
.middle2 {
  grid-area: middle2;
}
.middle3 {
  grid-area: middle3;
}


/* info box */

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}

/* RWD test */
/* hide options */
@media only screen and (max-width: 600px) {
  .hides {display: none;}
}

@media only screen and (max-width: 1300px) {
  .hidem {display: none;}
}

@media only screen and (min-width: 1301px) {
  .hidel {display: none;}
}