styling issue

[clear urchin]

i recall there being an update a few weeks ago, and since then my infoboxes haven’t had a border. is there anything i can do?

*on mobile

[muted tusk]

Please provide a link.

And try this:

.floatright {
    margin: 0 0 0.5em 0.5em;
    clear: right;
    float: right;
}

.floatleft {
    margin: 0 0.5em 0.5em 0;
    float: left;
    clear: left;
}```

Add this to [[MediaWiki:Common.css]]
and your [[MediaWiki:Minerva.css]]

[short otter]

https://meta.miraheze.org/wiki/MediaWiki:Common.css
https://meta.miraheze.org/wiki/MediaWiki:Minerva.css

[muted tusk]

Change "meta" into your subdomain

[clear urchin]

to?

[muted tusk]

yoursubdomain.miraheze.org

[clear urchin]

https://concordiancommonwealth.miraheze.org/wiki/Main_Page

[clear urchin]

i’ve done this, on my phone i’ve seen no effect

[muted tusk]

<@&808094140549562368> please have a look.

[clear urchin]

anyone? 😭

[muted tusk]

Please try with this instead

.tright {
    margin: 0 0 0.5em 0.5em;
    clear: right;
    float: right;
}

.tleft {
    margin: 0 0.5em 0.5em 0;
    float: left;
    clear: left;
}```

[clear urchin]

put that in these?

no change :(

[muted tusk]

Hmmm, weird 😕

@honest badger When you have time, could you take a look at why Zombi can't get a border in mobile skin?
As you know... I am clueless 🙂

[honest badger]

put it in mobile.css?

[muted tusk]

Why didn't I think about that? Jeezz. 🤦🏻‍♂️

[clear urchin]

did that, still nada on my device

[upbeat apex]

Pasting common.css into devtools while using the mobile frontend solves the issue, so there are some other styles than the ones mentioned above that need to be added in mobile.css

Try adding these styles from common.css to mobile.css:

/* Infobox template style */
.infobox {
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}

Ideally there should be a better solution than duplicating styles though, maybe TemplateStyles apply to MobileFrontend as well?

[clear urchin]

so i copy this into mobile.css?

[upbeat apex]

yes

this adds the borders on mobile as well

in theory all other infobox-related styles need to be applied on mobile too so you might need to copy more if there's anything missing

[clear urchin]

wdym?

[clear urchin]

that worked. tysm!

[upbeat apex]

well since apparently none of the styles required by the infoboxes are applied on mobile by default there might be some others missing than the one you copied

[clear urchin]

ah

[clear urchin]

it worked for everything but this one, where it’s now to the left?

[muted tusk]

It needs the

    margin: 0 0 0.5em 0.5em;
    clear: right;
    float: right;
}

.floatleft {
    margin: 0 0.5em 0.5em 0;
    float: left;
    clear: left;
}```

[upbeat apex]

those classes are not used on that page / that infobox template

[muted tusk]

oh right... Forgot again

    margin: 0 0 0.5em 0.5em;
    clear: right;
    float: right;
}

.tleft {
    margin: 0 0.5em 0.5em 0;
    float: left;
    clear: left;
}```

[upbeat apex]

those are missing as well, maybe .infobox should be targeted to apply the float? not sure, I have never used those kind of infoboxes

[muted tusk]

Problem is I still am horrible at css