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.

/* CSS placed here will be applied to all skins */

/* Style for the infobox */
.infobox {
    width: 100%;
    max-width: 400px; /* Maximum width for larger screens */
    margin: 0 auto; /* Center the infobox horizontally */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    padding: 10px;
    box-sizing: border-box; /* Include padding and border in width */
    font-size: 1rem; /* Responsive font size */
}

/* Ensure images in the infobox are responsive */
.infobox img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
}

/* Style for table rows and cells */
.infobox th,
.infobox td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
}

/* Center text in headers for better mobile appearance */
.infobox th {
    text-align: center;
}

/* Media query for mobile devices (screens smaller than 600px) */
@media screen and (max-width: 600px) {
    .infobox {
        width: 90%; /* Slightly smaller width for mobile */
        margin: 0 auto; /* Center on mobile */
        font-size: 0.85rem; /* Slightly smaller font for mobile */
    }

    .infobox th,
    .infobox td {
        padding: 5px; /* Reduced padding for mobile */
    }
}

/* Media query for very small screens (e.g., older phones) */
@media screen and (max-width: 400px) {
    .infobox {
        width: 95%; /* Use almost full width */
        font-size: 0.8rem; /* Further reduce font size */
    }
}