MediaWiki:Mobile.css: Difference between revisions

Revision as of 23:37, 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;
}