Page MenuHomePhabricator

If sitename is too long, overlaps other items in smaller views in timeless
Closed, ResolvedPublic

Description

Problem on small desktop, mobile.

Event Timeline

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.

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;
	}
}

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

https://gerrit.wikimedia.org/r/428875

Change 428875 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Prevent logo text overlapping icons on small mobile displays

https://gerrit.wikimedia.org/r/428875

Evad37 claimed this task.