MediaWiki:Mobile.css: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 1: | Line 1: | ||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
/* 1) | /* 1) Un-hide the navbox that Minerva’s mobile CSS has display:none’d */ | ||
.content .navbox, | .content .navbox, | ||
.content .vertical-navbox { | .content .vertical-navbox { | ||
display: block !important; | display: block !important; | ||
visibility: visible !important; | |||
- | height: auto !important; | ||
max-height: none !important; | |||
opacity: 1 !important; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
width: 100%; | width: 100% !important; | ||
} | } | ||
/* 2) | /* 2) Turn the inner table into a scroll container */ | ||
.content .navbox-inner { | .content .navbox-inner { | ||
display: block !important; | display: block !important; | ||
overflow-x: auto !important; | |||
-webkit-overflow-scrolling: touch !important; | |||
width: max-content !important; | width: max-content !important; | ||
min-width: 100% !important; | min-width: 100% !important; | ||
} | } | ||
/* 3) | /* 3) Lay out all your groups/items in a single row */ | ||
.navbox-group, | .content .navbox-group, | ||
.navbox-list { | .content .navbox-list { | ||
white-space: nowrap; | white-space: nowrap !important; | ||
margin: 0; | margin: 0 !important; | ||
padding: 0; | padding: 0 !important; | ||
} | } | ||
.navbox-group > li, | .content .navbox-group > li, | ||
.navbox-list > li { | .content .navbox-list > li { | ||
display: inline-block; | display: inline-block !important; | ||
float: none; | float: none !important; | ||
} | } | ||
} | } | ||
Revision as of 21:18, 24 April 2025
@media screen and (max-width: 720px) {
/* 1) Un-hide the navbox that Minerva’s mobile CSS has display:none’d */
.content .navbox,
.content .vertical-navbox {
display: block !important;
visibility: visible !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
box-sizing: border-box;
width: 100% !important;
}
/* 2) Turn the inner table into a scroll container */
.content .navbox-inner {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: max-content !important;
min-width: 100% !important;
}
/* 3) Lay out all your groups/items in a single row */
.content .navbox-group,
.content .navbox-list {
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.content .navbox-group > li,
.content .navbox-list > li {
display: inline-block !important;
float: none !important;
}
}