MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1,266: / Line 1,266: @@
      display: none;
 }
-/* --------- Responsive Infobox (Mobile Friendly) ---------- */
+/* ========== MOBILE-ONLY INFOBOX FIX (DESKTOP SAFE) ========== */
+@media (max-width: 600px) {
-.infobox {
+    /* Make infobox width fit mobile */
-    width: 100% !important;
+    .infobox {
-    max-width: 100% !important;
+        width: 100% !important;
-    font-size: 14px;
+        max-width: 100% !important;
-     border-collapse: collapse;
+        margin: 0 auto !important;
-    margin: 10px auto;
+        font-size: 14px !important;
-}
+     }
-/* Make image scale properly */
+    /* Image auto-resizes on mobile only */
-.infobox img {
+    .infobox img {
-    max-width: 100% !important;
+        max-width: 100% !important;
-    height: auto !important;
+        height: auto !important;
-}
+    }
-/* Left column (labels) */
+    /* Left label column */
-.infobox th {
+    .infobox th {
-    background: #e0e0e0;
+        width: 40% !important;      /* Slightly bigger label space */
-    font-weight: bold;
+        padding: 6px !important;
-    width: 35%;
+        background: #e0e0e0 !important;
-    padding: 6px;
+        word-break: break-word !important;
-    word-wrap: break-word;
+    }
-}
-/* Right column (values) */
+    /* Right value column */
-.infobox td {
+    .infobox td {
-    padding: 6px;
+        padding: 6px !important;
-    word-wrap: break-word;
+        word-break: break-word !important;
-}
-/* Prevent long text pushing layout */
-.infobox,
-.infobox td,
-.infobox th {
-    word-break: break-word;
-}
-/* Reduce size of header area on mobile */
-@media (max-width: 600px) {
-    .infobox {
-        font-size: 13px;
      }
+    /* Header title spacing */
      .infobox caption {
-         font-size: 18px;
+         font-size: 18px !important;
-         padding: 8px;
+         padding: 8px !important;
      }
 }