Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(Added Code to use for Perk-Grid) |
|||
| Line 5: | Line 5: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| − | gap: | + | gap: 20px; |
justify-content: center; | justify-content: center; | ||
} | } | ||
| Line 11: | Line 11: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
text-align: center; | text-align: center; | ||
| − | flex: 1 1 | + | flex: 1 1 380px; /* Minimum width before wrapping */ |
| − | max-width: | + | max-width: 440px; /* Prevent too-wide blocks */ |
} | } | ||
.perk-grid .perk table { | .perk-grid .perk table { | ||
| Line 18: | Line 18: | ||
margin-right: auto; | margin-right: auto; | ||
} | } | ||
| − | @media (min-width: | + | @media (min-width: 12800px) { |
.perk-grid .perk { | .perk-grid .perk { | ||
flex: 1 1 calc(33.333% - 12px); /* 3 per row on big screens */ | flex: 1 1 calc(33.333% - 12px); /* 3 per row on big screens */ | ||
Revision as of 17:47, 12 August 2025
/* CSS placed here will be applied to all skins */
.perk-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.perk-grid .perk {
box-sizing: border-box;
text-align: center;
flex: 1 1 380px; /* Minimum width before wrapping */
max-width: 440px; /* Prevent too-wide blocks */
}
.perk-grid .perk table {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 12800px) {
.perk-grid .perk {
flex: 1 1 calc(33.333% - 12px); /* 3 per row on big screens */
max-width: none;
}
}
