MediaWiki:Common.css: Difference between revisions
Created page with "→CSS placed here will be applied to all skins: →===== FULL VIEWPORT WIDTH =====: .mw-page-container, .mw-page-container-inner { max-width: 100% !important; padding: 0 !important; } #content, .mw-body { margin: 0 !important; padding: 20px 30px !important; border: none !important; } →===== PINNED SIDEBAR ON DESKTOP =====: @media (min-width: 1024px) { #mw-panel, .mw-sidebar, .vector-menu-portal { position: sticky !import..." |
No edit summary |
||
| Line 175: | Line 175: | ||
.fakeimg a img { | .fakeimg a img { | ||
height: 180px !important; | height: 180px !important; | ||
} | |||
} | |||
/* ===== MOBILE RESPONSIVE ===== */ | |||
@media (max-width: 768px) { | |||
/* Full width on mobile */ | |||
#content, .mw-body { | |||
padding: 10px 15px !important; | |||
} | |||
/* Stack cards */ | |||
.row { | |||
flex-direction: column !important; | |||
gap: 16px !important; | |||
} | |||
.column { | |||
max-width: 100% !important; | |||
min-width: unset !important; | |||
width: 100% !important; | |||
} | |||
/* Hero image */ | |||
.hero-img, | |||
.hero-img img, | |||
.hero-img a img { | |||
max-height: 200px !important; | |||
} | |||
/* Card images */ | |||
.fakeimg, | |||
.fakeimg img, | |||
.fakeimg a img { | |||
height: 160px !important; | |||
} | |||
/* Typography */ | |||
.cha-cont h2 { | |||
font-size: 14px !important; | |||
} | |||
.banner-cont p { | |||
font-size: 13px !important; | |||
} | |||
.ch-title { | |||
font-size: 18px !important; | |||
} | |||
/* Hide sidebar on mobile */ | |||
#mw-panel, | |||
.mw-sidebar { | |||
display: none !important; | |||
} | |||
/* Full width content when sidebar hidden */ | |||
#mw-content-text { | |||
margin-left: 0 !important; | |||
width: 100% !important; | |||
} | |||
/* Buttons full width on mobile */ | |||
.btn-grp { | |||
width: 100% !important; | |||
} | |||
.btn { | |||
display: block !important; | |||
text-align: center !important; | |||
width: 100% !important; | |||
box-sizing: border-box !important; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.fakeimg, | |||
.fakeimg img, | |||
.fakeimg a img { | |||
height: 140px !important; | |||
} | |||
#content, .mw-body { | |||
padding: 8px 10px !important; | |||
} | } | ||
} | } | ||