Looking for a FANDOM style mainpage redesign

[autumn tendon]

I swear there was an extension that adds fandom's column tags, but I can't find it

ah, well then

check its source code then, there surely would be classes defined in common.css

[arctic wagon]

I'd jst look at their css

It's likely using flexbox but you can also make grid work (but personally I find it harder for wrapping stuff properly)

[dense scarab]

I recently helped to restructure the trollpasta wiki's page using flexboxes yes. No extensions needed, just CSS

They use DPL for the side columns but you can manually write the links there instead

It is time consuming and currently I am busy. I'd recommend to read on flexbox and CSS as well and try to do it yourself

I will send some links that might be helpful to you

Flexboxes
https://www.w3schools.com/css/css3_flexbox.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Media queries (that's what can change styling depending on screen width)
https://www.w3schools.com/cssref/css3_pr_mediaquery.php

Are you familiar with CSS at least on a basic level?

As much as I'd like to I do not have time to design pages for everyone. I might make a universal guide that people not that familiar with CSS can follow if they want to

It's not. It should work on any skin really

Plus, trollpasta is using Monobook iirc

So Eyrith I plan to make a guide when I get the time. If you don't want to copy and figure out Trollpasta's main page, you can wait for it

[misty walrus]

FandoomMainPageTags

(yes, the spelling error is intentional)

[autumn tendon]

I remember it has "doom" lol but still couldn't find

[misty walrus]

Should be in parsers

[autumn tendon]

you can still code 2 columns w/ css tho

[misty walrus]

https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:DummyFandoomMainpageTags

[autumn tendon]

flexing is just a strange beast, it's always trial and error for me and when I succeeded I completely forgot how I made it within a week lol

[sleek sinew]

I used flexbox for ours

it looks great! my only comments (i hope this is okay)

more padding by this text

and a little space between the containers

between the header and the main body the attached borders look fine but something about this where it's side by side looks off/unintentional for some reason. sorry maybe not the feedback you were looking for. I think overall the page looks fantastic.

just add padding:10px to the list container

or 5px

whatever you prefer

let me test

ok so you have #mp-upper

it says border-spacing:0;

change that to border-spacing:5px;

#mp-tfa, #mp-dyk, #mp-itn, #mp-otd, #mp-other-lower > div {
    padding: 0.1em 0.4em;
``` you have this as well

idk hard refresh a bunch

maybe like 5-10 minutes max

change that to this

#mp-tfa, #mp-dyk, #mp-itn, #mp-otd, #mp-other-lower > div {
    padding: 1em;

you can use mediaqueries for mobile

but i tested it in mobile view and it looks fine like that

just add

@media screen and (max-width: 450px)
#mw-content {
    padding: 0 10px;
}
}

like at the bottom

of ur css

no

change it to 0.7 if you want

0.5 lower limit

the thing is the rounded corners

you need extra padding when you have rounded corners. also it looked a little crowded at the edges

0.7em might look better

were there always the big gaps on the side

if so thats fine i just dont know if im crazy

yeah

i think so

okay its up to you

it just looked crowded to me

ohhhhh

well im not sure what it looked like before tbh i kind of showed up late

but i think it looks really good now

umm i just finished ours if u wanna see

it has a bunch of links to different interesting pages. its image heavy tho its a manga/anime wiki

ok!!!

[arctic wagon]

If you’re using flexbox you should take advantage of the “flex” and gap and wrap properties