Editing Template talk:Infobox (section)

== Display on narrow screens ==

If you look at pages like [[Jimmy Greaves]] on a device with a narrow screen, either a mobile in desktop view or a regular computer with a small window, the infobox displays above the text with the normal width for the content, but the border is at full screen width. To see the problem, reduce the window size until it reaches a critical width (possible 640px) and the infobox jumps above the text and changes appearance. Looking at the examples in the documentation for {{tl|infobox football biography}} you see the same for Alev Kelter, where the border is full screen and the infobox content is to the left of the box bounded by the border (see [[Template:Infobox_football_biography#Embedding_other_infoboxes_(module_parameter)|here]]). However, another example for Tim Template switches to using the full width for the infobox, so the infobox is now wider than in larger window (see [[Template:Infobox_football_biography#Independent|here]]).

Both those infoboxes use {{tl|infobox football biography}} Other infobox such as {{tl|infobox settlement}} don't show this behaviour (e.g. see  [[Manchester]]), but the behaviour seems to originate with {{tl|infobox}} as you can see it in the documentation for this template (see [[Template:Infobox/doc|here]].

I can't work out why this happens, why {{tl|infobox settlement}} doesn't show the same, or why the Tim Template example has a different behaviour. &nbsp;—&nbsp;<span style="white-space: nowrap;font-family:Arial;background:#d6ffe6;border:solid 1px;border-radius:5px;box-shadow:darkcyan 0px 1px 1px;"> [[User:Jts1882|Jts1882]]  &#124;[[User talk:Jts1882| talk]]&nbsp;</span> 10:36, 21 April 2025 (UTC)

:Yes, the breakpoint width is currently defined as 640px.
:Infobox football bio has had a max-width of 420px set, which is why it does not go to full width as might be expected. This can be fixed by giving it a TemplateStyles sheet and then making the width a media query (as is done with infobox settlement below).
:Infobox settlement likewise loads a width of 23em at all widths rather than the relevant breakpoint. I've [https://en.wikipedia.org/w/index.php?title=Template%3AInfobox_settlement%2Fstyles.css&diff=1286716700&oldid=1043192559 now adjusted] that to go full width below the breakpoint, or whatever other behavior is plugged into the relevant CSS (on Minerva it's full width, on Vector 22 it's something a bit different but only incidentally as infoboxes are currently tables). [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:34, 21 April 2025 (UTC)
:: Your change to Infobox settlement only changes the outer border of the infobox. The content (rows and cells) only fill part of the width. I don't understand why they don't fill the full table width. As far as I can tell the row width is controlled by the size of the images. Increasing the image size also increases the width above the 640px when bigger than the 23em. &nbsp;—&nbsp;<span style="white-space: nowrap;font-family:Arial;background:#d6ffe6;border:solid 1px;border-radius:5px;box-shadow:darkcyan 0px 1px 1px;"> [[User:Jts1882|Jts1882]]  &#124;[[User talk:Jts1882| talk]]&nbsp;</span> 08:46, 22 April 2025 (UTC)
:::Yes, that's what {{tq|on Minerva it's full width, on Vector 22 it's something a bit different but only incidentally as infoboxes are currently tables}} implies. Below the break point Minerva has a ton of CSS to make this look "pretty", that needs assessment at some point (and which I'd prefer to defer until after infobox is not a table but instead a collection of divs). Vector22 on the other hand, because an infobox is a table, has some CSS which causes this "bad" look but which is valuable for tables more generally. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:16, 22 April 2025 (UTC)
:::: OK, with you now. You don't really need the <code>@media min-width</code> block as all it is doing is setting the width to 23em, rather than using the default infobox class width of 22em.
:::: It's a bit odd that the <code>tbody</code> and <code>tr</code> elements aren't using the full width of the <code>table</code>, but there is a fix for the others skins using a <code>@media max-width</code> block:
:::: <syntaxhighlight lang=css>
@media (max-width: 640px) {
	body:not(.skin-minerva) .ib-settlement th.infobox-header  {
		width:50%;
	}
}</syntaxhighlight>
:::: The 50% width works because headers span two columns in {{tl|infobox settlement}}. Other infoboxes would need different values. &nbsp;—&nbsp;<span style="white-space: nowrap;font-family:Arial;background:#d6ffe6;border:solid 1px;border-radius:5px;box-shadow:darkcyan 0px 1px 1px;"> [[User:Jts1882|Jts1882]]  &#124;[[User talk:Jts1882| talk]]&nbsp;</span> 11:48, 28 April 2025 (UTC)
:::::Which I've been trying to avoid introducing because it will just be a pile of hacks to undo (including for when at some point we do get to the land of divs since the ideal is that infoboxes scale down to one line for a label and one line for data) and which might be emulated in downstream or other infoboxes. There are indeed clear and obvious-ish solutions here and there, but they're all for a resolution which displays reasonably if not perfectly for a skin (or three) that I don't think we need to optimize for in the meantime. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 17:06, 28 April 2025 (UTC)