Hi Dread Knight @DreadKnight !

I come up with the solution I guess, but not sure which is better.

The first one simply add codes in media query in the style.less ("scale down" as you've suggested):

	#scoreboard{
		transform: scale(0.58);
		transform-origin: top;
	}

The result will be like this:

2vs2:

4vs4:

Then I feel it might suspiciously too easy (heh) and come up with another thought: what if I utilize the space during the landscape? Therefore I transpose the table with css using

		tr{
			display: block;
			float: left;
			td{
				display: block;
				border: 2px solid black;
			}
		}

2vs2:

4vs4:

The "price" will be changing some default css setting, for example using !important to adjust the width <id="scoreboard">
(the border between the table item is of course optional. And the return button should be resized as well)

Although the second one spend me (too) much time to tweak, it seems no big different to me and I don't which type you guys will prefer (or neither hahaha). I'd be glad to have some further feedback. And of course It's still a question to me if we should remove the title "current score".

Uh oh!

score screen not properly visible on mobile #1753

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions