= Problem
On the desktop, [[ https://en.wikipedia.org/wiki/Same-sex_marriage_in_Kentucky | Same-sex marriage in Kentucky ]] (and other US states) looks fine. [[ https://en.wikipedia.org/wiki/Template:Same-sex_unions | Template:Same-sex unions ]] runs down the right-hand side of the page, taking only about one-third of the width available for text (on my laptop at a size comfortable for my old eyes), and only its first section, //Marriage//, is expanded; the other three, //Civil unions and registered partnerships//, //Unregistered cohabitation//, and //See also//, are initially collapsed, with a "[Show]" button.
On my smartphone,* though, the template comes up fully expanded at almost the very top of the page, with only the title and the [[ https://en.wikipedia.org/wiki/Same-sex_marriage_in_Kentucky#/media/File:Same-sex_marriage_in_Kentucky_by_county,_August_2015.svg | lead graphic ]] above it. I have to scroll five full screens to reach the first line of text. Need I say how awkward this is? especially with the risk of tapping a link as I tap-scroll down.
%%%* Samsung Verizon Android Galaxy S-3, model SCH-I535, OS v4.4.2
%%%
== Infoboxes ==
On desktop, if an article has multiple infoboxes, we collapse each subsequent infobox after the first:
{F4596023}
We don't do this on mobile and it takes up a lot of space
https://en.m.wikipedia.org/wiki/California
= Plan
Mobile Frontend should
# implement the show/collapse option on collapsible templates, and
# possibly force-default them to start out collapsed.
```
mw.loader.using('jquery.makeCollapsible').done(function() {
$( '#content' ).find( '.mw-collapsible' ).makeCollapsible();
});
```
= Design
Goal:
{F8517080}
```
.mw-collapsible-toggle {
padding-top: 30px;
background: rgba(255,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 40px;
}
.mw-collapsible-toggle a {
margin-top: -45px;
display: block;
}
.mw-collapsible-toggle span
{
visibility: hidden;
}
.mw-collapsible-toggle ~ * {
padding-bottom: 30px;
display: block;
}
.mw-collapsible tbody > :first-child {
display: inherit !important;
visibility: inherit;
height: auto;
}
.mw-collapsed tbody > * {
display: block !important;
visibility: hidden;
height: 0;
}
```