MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 23:53, 8 March 2026

/* All CSS here will be loaded for users of the mobile site */

/* Force better wrapping/breaking for long words in main content */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd {
    overflow-wrap: break-word;      /* Breaks long words only when needed */
    word-wrap: break-word;          /* Legacy support */
    hyphens: auto;                  /* Adds soft hyphens if language supports (e.g., English) */
    -webkit-hyphens: auto;          /* Safari/iOS */
    -ms-hyphens: auto;              /* Edge */
}

/* Target the infobox area specifically to prevent squeezing text too much */
.infobox {                          /* Or use your wiki's exact infobox class, e.g. .infobox if standard */
    width: 100% !important;         /* Make infobox full-width on very small screens */
    max-width: 100%;
    float: none !important;         /* Optional: stack infobox above text instead of floating */
    margin: 0 auto 1em;             /* Center and add bottom margin */
    clear: both;
}

/* If the infobox has a fixed width causing issues, override it */
@media (max-width: 720px) {         /* Typical mobile breakpoint */
    .infobox {
        width: auto !important;
    }
    
    /* Ensure table-like cells in infobox wrap better if needed */
    .infobox td,
    .infobox th {
        overflow-wrap: break-word;
    }
}

/* Prevent horizontal scroll on the whole page if any overflow remains */
body,
#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;
}