|
|
| Line 184: |
Line 184: |
| margin-top: 1px; | | margin-top: 1px; |
| } | | } |
| /* MOBILE FIXES */
| |
| @media screen and (max-width: 720px) {
| |
| /* 1. Wrap the table in a scrolling container */
| |
| #ship-article .main {
| |
| overflow-x: auto;
| |
| -webkit-overflow-scrolling: touch;
| |
| }
| |
| #ship-article .main table {
| |
| display: block;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* 2. Stack columns */
| |
| #ship-article .left-col,
| |
| #ship-article .main td[valign="top"]:last-child {
| |
| display: block;
| |
| width: 100% !important;
| |
| float: none !important;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* 3. Fluid images */
| |
| #ship-article img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
|
| |
| /* 4. Simplify spacing & fonts */
| |
| #ship-article .box-line,
| |
| #ship-article .box-attributes,
| |
| #ship-article .box-info,
| |
| #ship-article .box-discussion {
| |
| padding: 0.5em 0.75em;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* Make attribute lines wrap more cleanly */
| |
| .att-line {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: flex-start;
| |
| }
| |
| .att-line .att-item {
| |
| flex: 1 1 45%;
| |
| margin: 0.25em 0;
| |
| }
| |
| }
| |
|
| |
|
| }} | | }} |
