MediaWiki:Common.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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Default styles for larger screens */
.page-container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
}

.infobox-container {
  width: 30%; /* Adjust the width as needed */
  float: left; /* Float the infobox-container to the left */
}

.infobox-wrapper {
  width: 100%; /* Ensure the wrapper takes up the full width */
  order: 2; /* Set the order to display the infobox below the image */
}

.infoboximg {
  width: 90%; /* Ensure the image takes up the full width of .infoboximg */
  order: 1; /* Set the order to display the image above the infobox */
}

.infobox {
  width: 70%; /* Ensure the infobox takes up the full width */
}

.content {
  width: 100%; /* Adjust the width as needed */
  padding-left: 5%;
}

/* Media query for smaller screens (tablets) */
@media (max-width: 1024px) {
  .page-container {
    flex-direction: column; /* Stack elements vertically on smaller screens */
    align-items: center; /* Center align content */
  }

  .infobox-container, .content {
    width: 100%; /* Allow each element to take up the full width */
    margin: 0; /* Remove any margins on smaller screens */
  }
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .page-container {
    align-items: flex-start; /* Align items to the top */
  }
}