MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 6: | Line 6: | ||
} | } | ||
/* | /* Base table styling */ | ||
.eras-table { | .eras-table { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
Line 12: | Line 12: | ||
} | } | ||
/* Ensure header spans full width | /* Ensure header spans full width */ | ||
.eras-table th { | .eras-table th { | ||
display: block; | |||
width: 100%; | width: 100%; | ||
text-align: center; | |||
} | } | ||
Line 23: | Line 24: | ||
} | } | ||
/* Medium screens and below - switch to 3x2 layout */ | /* Medium screens and below - switch to 3x2 layout for content */ | ||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
.eras-table { | .eras-table { | ||
display: table; | display: block; | ||
} | |||
.eras-table thead { | |||
display: block; | |||
} | |||
.eras-table th { | |||
display: block; | |||
width: 100%; | |||
} | } | ||
.eras-table tbody { | .eras-table tbody { | ||
display: | display: flex; | ||
flex-wrap: wrap; | |||
} | } | ||
.eras-table tr { | .eras-table tr { | ||
display: contents; | display: contents; | ||
} | } | ||
.eras-table td { | .eras-table td { | ||
flex: 0 0 33.333%; | |||
box-sizing: border-box; | |||
padding: 10px; | |||
} | } | ||
} | } |
Revision as of 12:13, 27 February 2025
/* Ensure images scale properly */ .eras-table img { max-width: 200px; width: 100%; height: auto; } /* Base table styling */ .eras-table { border-collapse: collapse; width: 100%; } /* Ensure header spans full width */ .eras-table th { display: block; width: 100%; text-align: center; } /* Default table cell behavior */ .eras-table td { vertical-align: top; } /* Medium screens and below - switch to 3x2 layout for content */ @media screen and (max-width: 800px) { .eras-table { display: block; } .eras-table thead { display: block; } .eras-table th { display: block; width: 100%; } .eras-table tbody { display: flex; flex-wrap: wrap; } .eras-table tr { display: contents; } .eras-table td { flex: 0 0 33.333%; box-sizing: border-box; padding: 10px; } }