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

/* Ensure only this table is affected */
.eras-table {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Style individual cells */
.eras-table td {
    flex: 1 1 16.66%; /* 6 columns: ~1/6th width each */
    box-sizing: border-box;
    text-align: center; /* Keeps images and text centered */
    min-width: 0; /* Prevents overflow issues */
}

/* Header spans full width always */
.eras-table th {
    flex: 1 1 100%;
}

/* Uniform image height */
.eras-table td img {
    height: 200px; /* Fixed height for all images */
    width: auto; /* Maintains aspect ratio */
    max-width: 100%; /* Ensures images don’t overflow cell */
    display: block; /* Removes unwanted spacing */
    margin: 0 auto; /* Centers images */
}

/* Medium resolution/zoom: 3 columns, 2 rows */
@media (max-width: 800px) {
    .eras-table td {
        flex: 1 1 33.33%; /* 3 columns: ~1/3rd width each */
    }
    .eras-table td img {
        height: 150px; /* Slightly smaller for medium screens */
    }
}

/* Small resolution/max zoom: 1 column, 6 rows */
@media (max-width: 400px) {
    .eras-table td {
        flex: 1 1 100%; /* 1 column: full width */
    }
    .eras-table td img {
        height: 100px; /* Smaller for single-column view */
    }
}