CSS Vorgabe Schriftgröße auf dem Smartphone anders angezeigt

    Liebe Community,


    ich nutze für unseren Schulkalender die Komponente JEVents.

    In der Jahresübersicht - einer Tabelle - wird der Inhalt der ersten Zelle / Spalte auf dem Smartphone deutlich kleiner angezeigt. (Siehe Bild-1 mit vertical-align: top).

    Aktuell habe ich für die erste Zelle den Befehl vertical-align: middle im Einsatz. So fällt der Größenunterschied nicht so extrem auf wie auf dem Bild 1 zu sehen.


    Auf dem PC sind beide Schriften gleich groß, wenngleich ich bei einer Markierung geringe Höhenunterschiede feststellen kann (Bild-2). Hier fällt es aber nicht auf, bzw. stört nicht. Grund dafür ggf. der Befehl URL ACTIV Unterline der ausgestellt ist?


    Kann sich jemand erklären, warum es auf dem Smartphone so klein angezeigt wird?


    Beste Grüße

    Stephan

    Ich denke vertical-align: middle sollte auch auf die 2. Zelle angewendet werden, um dem Versatz zu vermeiden.


    Und wegen der Schriftgröße: versuche mal an Stelle von 12px 0.75rem zu nutzen. Das bezieht die Schriftgrößße immer auf die Root-Definition und sichert Einheitlichkeit und dazu vielleicht noch !important also font-size: 0.75rem !important;. So habe ich es getan und bei mir tritt der Schriftgrößenunterschied nicht auf.

    Gruß

    Heinz


    "Wer es nicht versucht schafft es auch nicht."

    Zitat von hrybak

    Ich denke vertical-align: middle sollte auch auf die 2. Zelle angewendet werden, um dem Versatz zu vermeiden.


    Und wegen der Schriftgröße: versuche mal an Stelle von 12px 0.75rem zu nutzen. Das bezieht die Schriftgrößße immer auf die Root-Definition und sichert Einheitlichkeit und dazu vielleicht noch !important also font-size: 0.75rem !important;. So habe ich es getan und bei mir tritt der Schriftgrößenunterschied nicht auf.

    Vielen Dank!


    Habe nun folgenden Befehl genutzt:

    <table>

    <tbody>

    <tr>

    <td style="width: 90px; font-size: 0.75rem !important;">{{Startdatum:STARTDATE; %d.%m., (%a.)}}</td>

    <td>{{Title Link:TITLE_LINK}}</td>

    </tr>

    </tbody>

    </table>


    Leider ohne Erfolg.

    Ich werde mich jetzt einfach damit begnügen. Viele Grüße

    Zitat von toto1982

    <td style="width: 90px; font-size: 0.75rem !important;">{{Startdatum:STARTDATE; %d.%m., (%a.)}}</td>

    <td>{{Title Link:TITLE_LINK}}</td>

    Wenn Du beide Zellen gleich haben willst, musst Du auch die zweite Zeile formatieren:


    <td style="width: 90px; font-size: 0.75rem !important;">{{Startdatum:STARTDATE; %d.%m., (%a.)}}</td>

    <td style="width: 90px; font-size: 0.75rem !important;">{{Title Link:TITLE_LINK}}</td>


    Das geht in HTML halt anders als in CSS. In HTML ist jede Zeile extra zu formatieren. Das siehst Du im HTML Inspector im Vergleich der beiden td. Der erste hat 0,75rem, der zweite noch immer 12px.


    In CSS würde das so aussehen:


    .ev_td_li table tbody tr td {width: 90px; font-size: 0.75rem !important;} womit dann alle td unterhalb tr gleichartig formatiert sind.

    Gruß

    Heinz


    "Wer es nicht versucht schafft es auch nicht."

    Hey,

    genau so hatte ich es. Ausnahme, die 2. Spalte habe ich in der Breite nicht bestimmt.

    Zitat von hrybak

    <td style="width: 90px; font-size: 0.75rem !important;">{{Startdatum:STARTDATE; %d.%m., (%a.)}}</td>

    <td style="width: 90px; font-size: 0.75rem !important;">{{Title Link:TITLE_LINK}}</td>

    Danke den CSS Hinweis.

    Zitat von hrybak

    .ev_td_li table tbody tr td {width: 90px; font-size: 0.75rem !important;} womit dann alle td unterhalb tr gleichartig formatiert sind.

    Ich habe diesen in den jevcustom.css. Sie greift auch wie zu sehen (Homepage), auf dem Smartphone wird die erste Zelle jedoch noch immer kleiner angezeigt.

    Einfach verhext.

    Ich würde dir den Umstieg /Update auf Joomla 4 ans Herz legen um dann entweder das Standardtemplate Cassiopeia oder Templates mit passenden Framework von Drittanbietern zu verwenden. Der Umstieg ist wirklich nicht schwer und Schüler, Eltern sowie Lehrer werden begeistert sein ;).

    Besten Dank für die Rückmeldungen.


    Zitat von Gerald

    Hallo
    Nur zur Info.

    Die Website ist ja nicht responsive.

    Was genau bedeutet das?

    Zitat von WM-Loose

    Ich würde dir den Umstieg /Update auf Joomla 4 ans Herz legen um dann entweder das Standardtemplate Cassiopeia oder Templates mit passenden Framework von Drittanbietern zu verwenden. Der Umstieg ist wirklich nicht schwer und Schüler, Eltern sowie Lehrer werden begeistert sein ;).

    Einem Umstieg gegenüber bin ich immer skeptisch, ob alles funktioniert.


    Ggf. ist es dann auch an der Zeit, das ganze Projekt in professionelle Hände zu geben.


    Ich weiss bis heute nicht, wie ich es letztlich zu diesem Ergebnis geschafft habe. Viel!!!! zu viele unbezahlte Stunden.


    Ggf. sind es auch immer wieder erneut überschriebene Befehle, die zur kleinen Schrift führen. 🤷🏻‍♂️


    Besten Dank trotzdem