|
|
| Line 1: |
Line 1: |
| /* Ensure only this table is affected */
| |
| .eras-table {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| width: 100%;
| |
| }
| |
|
| |
|
| /* Style individual cells */
| |
| .eras-table td {
| |
| flex: 1 1 16.66%; /* 6 columns: ~1/6th width each */
| |
| box-sizing: border-box;
| |
| text-align: center; /* Keeps images and text centered */
| |
| min-width: 0; /* Prevents overflow issues */
| |
| }
| |
|
| |
| /* Header spans full width always */
| |
| .eras-table th {
| |
| flex: 1 1 100%;
| |
| }
| |
|
| |
| /* Uniform image height */
| |
| .eras-table td img {
| |
| height: 200px; /* Fixed height for all images */
| |
| width: auto; /* Maintains aspect ratio */
| |
| max-width: 100%; /* Ensures images don’t overflow cell */
| |
| display: block; /* Removes unwanted spacing */
| |
| margin: 0 auto; /* Centers images */
| |
| }
| |
|
| |
| /* Medium resolution/zoom: 3 columns, 2 rows */
| |
| @media (max-width: 800px) {
| |
| .eras-table td {
| |
| flex: 1 1 33.33%; /* 3 columns: ~1/3rd width each */
| |
| }
| |
| .eras-table td img {
| |
| height: 150px; /* Slightly smaller for medium screens */
| |
| }
| |
| }
| |
|
| |
| /* Small resolution/max zoom: 1 column, 6 rows */
| |
| @media (max-width: 400px) {
| |
| .eras-table td {
| |
| flex: 1 1 100%; /* 1 column: full width */
| |
| }
| |
| .eras-table td img {
| |
| height: 100px; /* Smaller for single-column view */
| |
| }
| |
| }
| |