MediaWiki:Common.css: Difference between revisions

From WikiLegend
Jump to navigation Jump to search
No edit summary
Tags: Reverted Mobile edit Mobile web edit
No edit summary
Tags: Manual revert Reverted
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* Style for the infobox */
.infobox {
.infobox {
    width: 100%;
  border-collapse: collapse;
    max-width: 400px; /* Maximum width for larger screens */
  background: #f9f9f9;
    margin: 0 auto; /* Center the infobox horizontally */
  border: 1px solid #aaa;
    border: 1px solid #ccc;
  width: 22em;
    background-color: #f9f9f9;
  font-size: 90%;
    padding: 10px;
    box-sizing: border-box; /* Include padding and border in width */
    font-size: 1rem; /* Responsive font size */
}
}
 
.infobox th {
/* Ensure images in the infobox are responsive */
  background: #d0e0f0;
.infobox img {
  padding: 4px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
}
}
/* Style for table rows and cells */
.infobox th,
.infobox td {
.infobox td {
    padding: 8px;
  padding: 4px;
    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 */
    }
}
}

Revision as of 15:50, 4 June 2025

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

.infobox {
  border-collapse: collapse;
  background: #f9f9f9;
  border: 1px solid #aaa;
  width: 22em;
  font-size: 90%;
}
.infobox th {
  background: #d0e0f0;
  padding: 4px;
}
.infobox td {
  padding: 4px;
}