MediaWiki CSS?

Cobalt

Hullo!

Did you know CSS? Can you help with a mobile view of a wiki problem? Pls to poke. I need help.

Roz

I am not a professional dev, but I've dealt with CSS both for wikis and for my company's website and could take a look.

Cobalt

Do you think you could give me the code for how to resize things on the mobile version of a wiki? The fallcoast wiki is basically unreadable if you're on a non-computer. :<

Roz

Ohhhh. That's not a simple one. If the skin you're using isn't responsive or mobile-friendly, I'd take a look through some responsive/mobile-friendly skins (the two games I staff on use Foreground and set it to be the skin for mobile devices. (I've never done that part myself, but I'm sure the steps for that would be easy findable.)

Glancing at the Fallcoast wiki, I'm guessing that side menu is going to be going to probably be a source of headache.

skew

Fallcoast is calling the panel in a separate divclass in the common.css...

div#mw-panel { width: 14em; }
.mw-body { margin-left: 14em; }

And if you look at TR's website...

/* CSS placed here will be applied to all skins */
 
.twocol {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
 
.threecol {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}
 
span.dots {
  white-space: nowrap;
}

The issue isn't so much resizing, as the CSS is set to have the side bar as it's own unit that can be scrolled independently. My instinct would be to remove the reference to #mw-panel entirely, and then hope that mediawiki knows to display the sidebar. You'd lose the ability to scroll, but gain the ability to actually have a mobile verison. I think it does? As you can tell I'm not exactly a wiz at this, but hey, somewhere to start!

Alternate would be to install an extension that allows separate CSS for mobile and desktop.

Cobalt

Removing the Mw stuff seems to have made things readable without breaking anything. thanks guys!

TiredEwok

@Cobaltasaurus

I was going to drop you a @mail on the game but since this is a thread, thought I'd just bring it up here, instead.

One thing I noticed is that on my iPad, the wiki's search bar is not there. Not on Safari and not on Chrome. Not that there isn't an easy way to get around that in some cases, like if you're looking for a character page - can get to it via the list of character pages - but it makes looking for harder-to-find pages a bit more difficult.

Cobalt

Ugh, yeah, the search-bar z-alignment needs to be reset I believe, but I don't know how to do that.

Anyone got suggestions?

skew

You are very welcome! Ever since Fallcoast's opening, the inability to use the wiki via mobile has been driving me nuts. I'd offered to fix it earlier but... that didn't come to be. I'm happy you fixed it.

@Cobaltasaurus said:

Ugh, yeah, the search-bar z-alignment needs to be reset I believe, but I don't know how to do that.

Anyone got suggestions?

It's displaying fine on my iPhone, so I'm really not sure.