MediaWiki:Mobile.css: Difference between revisions

← Older edit

@@ Line 38: / Line 38: @@
 #content {
      overflow-x: hidden;
+}
+/* On mobile: Stack the infobox/table above the text so main content gets full width */
+@media (max-width: 720px) {
+    /* Target generic tables that look like infoboxes – adjust selector if needed */
+    table[style*="float:right"],          /* If any inline float:right */
+    table.infobox,                        /* In case future ones use class */
+    table[align="right"],                 /* Old align attribute */
+    .mw-parser-output table:first-child { /* Often the first table is the infobox */
+        float: none !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 0 1em 0 !important;
+        clear: both !important;
+        border-collapse: collapse;        /* Cleaner look */
+    }
+    /* Make table cells wrap long content */
+    table td,
+    table th {
+        word-break: break-word !important;
+        overflow-wrap: break-word !important;
+        hyphens: auto !important;
+    }
+}
+/* Aggressive mobile text wrapping for paragraphs/lists – prevents mid-word cuts or overflow */
+@media (max-width: 720px) {
+    .mw-parser-output p,
+    .mw-parser-output li,
+    .mw-parser-output dd,
+    .mw-parser-output .mw-content-ltr p {
+        overflow-wrap: break-word !important;
+        word-break: break-word !important;  /* Breaks long compounds */
+        hyphens: auto !important;
+        -webkit-hyphens: auto !important;
+        -ms-hyphens: auto !important;
+    }
+}
+/* Safety nets: No horizontal scroll, better body handling */
+body,
+#content,
+.mw-content-container,
+.mw-parser-output {
+    overflow-x: hidden !important;
+    word-break: normal !important;
 }