Thread:Iynque/@comment-4059089-20140618175816/@comment-856287-20140619033731

Oooooh, haha :D

Those style are much simpler. One good tip: They are all formatted with header tags containing span tags: header

For the multi-column layouts, I use some special CSS, but I'm still working out some bugs. It's neat though because it will make text format itself in up to 3 columns when the window is big enough, and as the window gets smaller, the columns collapse into one column automatically. On mobile, of course, it will just be one column, so you won't end up with stuff squished together in two columns on a cellphone 😃

Here is the css: So, to create a columnar layout, surround the content in div tags with class="MCL-2col" or class="MCL-3col" and that's all you need to make gracefully collapsing columns. You can then add div tags with class="columnItem" to keep parts together (for example to keep a headline with text under it, to make sure you don't have the headline on the bottom of one column and the text on the top of the next column. …and lastly, there's a bit on the end ".MCL-3col h1, .MCL-3col h2," etc. That uses the column-span property, which makes any headlines ignore columns, span across them, and start the columns over again. You can easily disable that by deleting or commenting-out that part.

So, for example…

You can see examples of it working at w:c:iynque (3 columns, if your window is wide enough), and w:c:iynque:User:Iynque/Sandbox (2 columns, if your window is wide enough). Try making your window smaller to see the columns collapse into a single column.

…and, again, there are some bugs that need to be worked out, but it mostly works, apart from splitting up content it shouldn't sometimes.