Problem on small desktop, mobile.
Description
Description
Details
Details
Subject | Repo | Branch | Lines +/- | |
---|---|---|---|---|
Prevent logo text overlapping icons on small mobile displays | mediawiki/skins/Timeless | master | +14 -0 |
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | Isarra | T173152 Timeless: Usability issues on mobile devices | |||
Resolved | Evad37 | T161461 If sitename is too long, overlaps other items in smaller views in timeless |
Event Timeline
Comment Actions
This was really annoying me, so I put the following code in my timeless.css:
@media screen and (max-width: 550px) { #p-logo-text { position: static; margin-bottom: 0.75em; } }
Which effectively puts the sitename on its own line above the search box, rather than overlapping the menu icons, for small/mobile screens.
The 550px breakpoint is just from what works for Meta with my setup; I'm not sure it would be suitable in all cases.
Comment Actions
User:KPFC posted similar CSS at mw:Skin_talk:Timeless#Issues_with_very_small_screens:
@media screen and (max-width: 500px) { //to hide the wiki-logo which is not necessary but overlaps to the echo-badges #p-logo-text { display:none; } .suggestions { //to make the suggestions display above all the other content, especially the menu bar under the search bar z-index: 100 !important; //otherwise the suggestions would cover up the search field, so you can’t see what you typed margin-top:50px; } }
Comment Actions
Change 428875 had a related patch set uploaded (by Evad37; owner: Evad37):
[mediawiki/skins/Timeless@master] Prevent logo text overlapping icons on small mobile displays
Comment Actions
Change 428875 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Prevent logo text overlapping icons on small mobile displays