MediaWiki:Mobile.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

.minerva-header .branding-box {
    max-width: 50% !important;  /* Prevents header from becoming too wide */
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-overflow: ellipsis;  /* Prevents it from overflowing */
    display: block !important;
    flex-shrink: 1 !important; /* Ensures it shrinks properly */
}

@media (max-width: 768px) { /* Mobile-specific adjustments */
    .minerva-header .branding-box {
        max-width: 40% !important; /* Adjust to prevent pushing icons */
        font-size: 14px !important; /* Ensures proper text scaling */
    }
}

/* Fix heading positionning. */
.page-heading {
	padding-top: 1em;
}

/* Show elements which are given this class (they are shown again by Common.css). */
.mobileonly { display: block; }

/* Hide elements which are given this class */
.nomobile { display: none; }

/* Squeeze the menu icons because the logo with wordmark makes the header to large. */
#minerva-user-menu-toggle { padding: 0.5em; }
#user-notifications { padding: 0.5em; }
#searchIcon { padding: 0.5em; }
.branding-box { margin-right: 20px; zoom: 90%; }

/* Truncate the title with an ellipsis */
.minerva-header .branding-box .vector-logo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%; /* Adjust this as needed */
}