MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 6: | Line 6: | ||
} | } | ||
/* | /* Default table styling */ | ||
.eras-table { | .eras-table { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
width: 100%; | |||
} | |||
/* Ensure header spans full width at all times */ | |||
.eras-table th { | |||
width: 100%; | |||
display: block; | |||
} | } | ||
Line 19: | Line 26: | ||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
.eras-table { | .eras-table { | ||
display: | display: table; /* Keep table structure */ | ||
} | } | ||
.eras-table tbody { | .eras-table tbody { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, 1fr); /* 3 columns */ | grid-template-columns: repeat(3, 1fr); /* 3 columns */ | ||
grid-template-rows: repeat(2, auto); /* 2 rows */ | |||
gap: 10px; | gap: 10px; | ||
} | } | ||
.eras-table | .eras-table tr { | ||
display: | display: contents; /* Allows cells to flow into grid */ | ||
} | } | ||
.eras-table td { | .eras-table td { |
Revision as of 12:10, 27 February 2025
/* Ensure images scale properly */ .eras-table img { max-width: 200px; width: 100%; height: auto; } /* Default table styling */ .eras-table { border-collapse: collapse; width: 100%; } /* Ensure header spans full width at all times */ .eras-table th { width: 100%; display: block; } /* Default table cell behavior */ .eras-table td { vertical-align: top; } /* Medium screens and below - switch to 3x2 layout */ @media screen and (max-width: 800px) { .eras-table { display: table; /* Keep table structure */ } .eras-table tbody { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns */ grid-template-rows: repeat(2, auto); /* 2 rows */ gap: 10px; } .eras-table tr { display: contents; /* Allows cells to flow into grid */ } .eras-table td { display: block; width: 100%; } }