mobile view: first column in infoboxes is too wide
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	JStrodt_WMDE
	Nov 6 2017, 7:28 AM

Description

Hello, here's a question from a user on de:WP (https://de.wikipedia.org/wiki/Wikipedia:Fragen_zur_Wikipedia#Klasse_.22infobox.22_in_der_mobilen_Ansicht):

Currently in the mobile view, the class "infobox" generates a first column that is too wide, see e.g. https://de.m.wikipedia.org/wiki/Thor:_Tag_der_Entscheidung.

Bildschirmfoto 2017-11-06 um 08.13.23.png (1×662 px, 240 KB)

This seems to be due to

.content table.infobox td {
    width: 100%;
}

It works when

table.infobox td {width: auto !important}

is added.

Could someone have a look if this can be solved please?

Thanks,
Johanna

Related Objects

Mentioned In: T168716: Mobile infobox styles do not work well with multiple column infobox rows

Event Timeline

JStrodt_WMDE created this task.Nov 6 2017, 7:28 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 6 2017, 7:28 AM

JStrodt_WMDE removed subscribers: Aklapper, Bmueller, • MichaelSchoenitzer_WMDE and 5 others.Nov 6 2017, 8:57 AM

Tobi_WMDE_SW added projects: Mobile, MobileFrontend.Nov 6 2017, 9:19 AM

Going to https://de.m.wikipedia.org/wiki/Thor:_Tag_der_Entscheidung?debug=true and opening the browser's developer tools, it shows that .content table.infobox td { width: 100%; } is defined in https://de.m.wikipedia.org/w/load.php?debug=true&lang=de&modules=skins.minerva.content.styles&only=styles&skin=minerva so this might be an issue in the MinervaNeue skin.

resources/skins.minerva.tablet.styles/hacks.less already has similar code to what's proposed here:

@media all and ( min-width: @deviceWidthTablet ) {
	// Float infoboxes to the right of the page
	table.infobox {
		margin: 0.5em 0 1em 35px !important;
		// Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left
		max-width: @infoboxWidth;
		// FIXME [Templates]: Inline styles force us to use !important
		width: auto !important;
		float: right !important;
		clear: right !important;

		td {
			width: auto;
		}

Jdlrobson mentioned this in T168716: Mobile infobox styles do not work well with multiple column infobox rows.Nov 6 2017, 3:38 PM

• Jhernandez added a project: Web-Team-Backlog.Nov 6 2017, 4:26 PM

• Jhernandez moved this task from Needs triage to Triaged on the Mobile board.Nov 6 2017, 4:31 PM

Dvorapa closed this task as a duplicate of T168716: Mobile infobox styles do not work well with multiple column infobox rows.Nov 6 2017, 8:15 PM

JStrodt_WMDE awarded a token.Nov 7 2017, 8:52 AM

	F10636749: Bildschirmfoto 2017-11-06 um 08.13.23.png
	Nov 6 2017, 7:28 AM

mobile view: first column in infoboxes is too wideClosed, DuplicatePublicActions

Description

Related Objects

Event Timeline

mobile view: first column in infoboxes is too wide
Closed, DuplicatePublic
Actions