CSS von Endgerät und Editor unterschiedlich interpretiert

[Malte]

Moin,

ich verzweifel an meiner Terminübersicht… Hier mal das Problem: Im Editor schaut es aus wie gewünscht. Auf dem Tablet im Wohnzimmer wird dann das Layout falsch angezeigt.

Ich habe das folgende CSS im Eigenschaftenfenster des vis-Editors eingefügt:

.container {
    padding: 4px;
    display: grid; 
    grid-template-rows: 1fr; 
    grid-template-columns:20px 4px 100px 1fr; 
    font-family:Gill Sans MT; 
    font-size:18px;
}

.terminUhrzeit {
    color:#ffdf92;
    width:90px;
}

.terminName {
    color:#798499;
    width: 100%;
}

.terminAbtrenner{
    background-color: #1094bb; 
    height: 100%;
}

.rotate {
    color:#798499;
    display: block;
    transform-origin: top left;
    /* Note: for a CLOCKWISE rotation, use the commented-out
    transform instead of this one. */
    transform: rotate(90deg) translate(0,-100%);
    /* transform: rotate(90deg) translate(0, -100%); */
    margin-top: -50%;
    white-space: nowrap;
}

.rotation-wrapper-outer {
      display: table;
}
.rotation-wrapper-inner {
      padding: 50% 0;
      height: 0;
}

Das HTML schaut wie folgt aus:

            19.10. 

                 12:00-14:00  |
                 Test 123   |

                 12:00-14:00  |
                 Termin 3   |

                 12:00-14:00  |
                 Irgendwas   |

                 12:00-14:00  |
                 Frei   |

Tja, ich weiß hier echt nicht mehr weiter. Die Schriften und Farben werden angezogen, die Layoutinformationen weggelassen oder fehlinterpretiert.

Habe schon versucht das als Tabelle nachzubauen und festgestellt, dass es schon besser ist, sowas mit CSS-Containern zu machen.

Kann mir jemand weiterhelfen?

Danke und viele Grüße

Malte