grizzled vault
this template https://voidstranger.miraheze.org/wiki/Template:MusicBox takes up a lot of space on mobile, making the text beside it really cramped. this could be fixed by making it appear over the text instead of beside it, though.. that would in turn look bad on desktop. if possible, how could one go about making the template render differently on mobile while not changing the way it appears on desktop?
lost rose
put class .mbox-container on the float:right div, add this css
@media (max-width:600px) {
.mbox-container {
width:100%;
display:flex;
justify-content:center;
}
}```i copied the css and it did change the rendering a bit though its still not quite there.. it seems like only mboxes of a certain width display properly; ones that are too short mess the text up still, and ones that are too long go off screen partially. maybe this is on me for not understanding the first part of your message, could you elaborate on it a bit?
lost rose
oh u didnt add the class so this css shouldnt have done anything at all
add the class on the outer div on that template page
<div class="mbox-container" style="float:right">```ahh okay, thank you.. i really dont do enough stuff with css x-x
this has done the trick for some of them! ones that are too wide disappear off screen partially and make the page widen too
i wonder if maybe its possible define how the text should wrap inside the mbox to avoid this knd of thing
lost rose
try this?
@media (max-width:600px) {
.mbox-container {
width:100%;
}
.mbox-outer {
display:flex;
justify-content:center;
}
}```