Verschiedene Fragen zur Beta 6 und 3 Vorschläge

There are many variations for mobile (multiple OS, browsers and screen sizes).

I will try your suggestion and test again.

1 Like

@TheME

Your suggestion (changing max(195px, 100vh - 240px) to max(195px, 100vh - 140px)) will increase the height of the <pre> element in 100px, requiring more scroll.

I updated the branch to use different CSS units and account for the address bars and UI elements.

Can you please test the new code to see if the results are better?

1 Like

Now it works fine for me, thanks :+1:

Do you may also have an idea how to fix the too short red line (emerging on small screens)?

I saw the same issue, but I'm not sure if this is possible only with CSS (maybe, maybe not).

I will investigate this when I got time.

So, jetzt auch in development-v6 enthalten - die Frage mit der roten Linie ist bislang unbeantwortet. Wir erstellen im Code einen rote Linie, die keine feste Länge hat = über die gesamte Länge gehen sollte (leider Konjunktiv). Dass die Browser "die gesamte Länge" als "was der Nutzer gerade jetzt sieht" interpretiert ist zumindest spannend finde ich. Wir schauen uns weiter nach einer Lösung um, ich weiß aber noch nicht wie/ob es was werden wird.

I think I found a solution (apparently there are no bad side effects).

Adding display: grid to the parent element (#output ) and adding width: 100% to the <hr> works as expected. I will open a PR.

EDIT:

PR created. Tests are welcome.

This makes the red line width work as expected.

But then every second line is left blank.
Same display on PC and on smartphone.

Looks like with display: grid there is no need for <br> between the <span> elements.

development-v6

fix/red_line_width

Thanks.
I see the same behavior in Chrome and Edge. I'm trying to fix it.

The most strange part - this doesn't happen in Firefox: