Page MenuHomePhabricator

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


Problem on small desktop, mobile.

Event Timeline

Isarra created this task.Mar 26 2017, 5:57 PM
Evad37 added a subscriber: Evad37.Feb 19 2018, 1:58 PM

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 {
	.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

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

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

Evad37 closed this task as Resolved.May 11 2018, 12:14 AM
Evad37 claimed this task.