MediaWiki:Mobile.css

Note: After publishing, 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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the mobile site */

/* Main page layout */

.wiki-main-container {
  max-width: 1400px;
  margin: 0 auto;
}

.games-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.game-section {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.game-header {
  background-image: linear-gradient(rgba(246,246,246,0), rgba(246,246,246,1));
  margin: 10px 10px 0px 10px;
  text-align: center;
}

.game-header img {
  max-width: 100%;
  height: auto;
}

.game-content {
  border: 1px solid #D8D8D8;
  padding: 8px;
  margin: 0px 10px 10px 10px;
  background: #FFFCF2;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.icon-grid a {
  display: block;
  width: 100%;
}

.icon-grid img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 192px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .games-wrapper {
    flex-direction: column;
  }
  
  .game-section {
    max-width: 100%;
  }
}

@media (max-width: 512px) {
  .icon-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .game-header {
    margin: 5px;
  }
  
  .game-content {
    margin: 0 5px 10px 5px;
    padding: 8px 4px;
  }
}