MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* Ensure images scale properly */ | |||
.eras-table img { | .eras-table img { | ||
max-width: 200px; | max-width: 200px; | ||
Line 5: | Line 6: | ||
} | } | ||
/* | /* Reset default table behavior when we want grid */ | ||
.eras-table { | |||
border-collapse: collapse; | |||
} | |||
/* Default table cell behavior */ | |||
.eras-table td { | |||
vertical-align: top; | |||
} | |||
/* Medium screens - force 2x3 layout */ | |||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
.eras-table { | .eras-table { | ||
display: block !important; /* Override any table display */ | |||
} | |||
.eras-table tbody { | |||
display: grid; | display: grid; | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
gap: 10px; | |||
} | } | ||
.eras-table th { | .eras-table th { | ||
display: block; | |||
width: 100%; | |||
} | |||
.eras-table td { | |||
display: block; | |||
width: 100%; | |||
} | } | ||
} | } | ||
/* | /* Small screens - force 6x1 layout */ | ||
@media screen and (max-width: 400px) { | @media screen and (max-width: 400px) { | ||
.eras-table { | .eras-table tbody { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
} | } |
Revision as of 12:07, 27 February 2025
/* Ensure images scale properly */ .eras-table img { max-width: 200px; width: 100%; height: auto; } /* Reset default table behavior when we want grid */ .eras-table { border-collapse: collapse; } /* Default table cell behavior */ .eras-table td { vertical-align: top; } /* Medium screens - force 2x3 layout */ @media screen and (max-width: 800px) { .eras-table { display: block !important; /* Override any table display */ } .eras-table tbody { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .eras-table th { display: block; width: 100%; } .eras-table td { display: block; width: 100%; } } /* Small screens - force 6x1 layout */ @media screen and (max-width: 400px) { .eras-table tbody { grid-template-columns: 1fr; } }