Template:ShipArticle: Difference between revisions

@@ Line 184: / Line 184: @@
    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;
+  }
+}
 }}
 <div id='ship-article'>