Text mit CSS formatiert -> unerwünschte Auswirkungen

    Joomla Version
    4.4.3
    PHP Version
    PHP 8.2.x
    Hoster
    Biohost
    Link (URL) zur Seite mit dem Problem
    https://spl.servicepointloch.de/index.php/component/content/article/spl-classics?catid=12:firma&Itemid=23

    Guten Morgen,


    ich benötige Hilfe oder Denkanstösse bei der Formatierung des Textes unter den Öffnungszeiten: "Es muss nicht immer Porsche ..."

    Für diesen Text möchte ich je nach Displaygröße zwei unterschiedliche Schriftgrößen angeben. Dazu habe ich in der user.css des Childtemplates von Cassiopeia folgende Anweisung notiert:

    Code
    .inhalt {
  font-size: calc(1.0rem + 1.0vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (width >= 1200px) {
  .inhalt {
    font-size: 2.5rem;
}

    Das funktioniert auch soweit mit der Schriftgröße, und auf einem PC-Monitor ist auch alles ok. Aber zur gleichen Zeit passiert bei Displays unter 1200px noch etwas anderes:

    Der graue Hintergrund des Menü-Fensters verschwindet komplett und die Buttons "Mail" und "Kontakt" unter dem obersten Bild rutschen nach links und sind nur noch ganz schwach zu sehen, als ob sie irgendwie hinter einer transparenten Ebene liegen würden.


    Da ich die Seite wieder in den optischen Urzustand versetz habe, habe ich ein paar Screenshots angehängt, die mein Problem verständlicher machen sollen.



    Die Bilder 1+2 zeigen den korrekten Zustand, die Bilder 3+4 den Zustand nach Einfügen des oben genannten Codes. Ich habe auf meinem Smartphone verschiedene Browser installiert, es sieht auf allen genauso aus. Sobald ich den Code in die user.css einfüge, ändert sich das Aussehen auf Displays unter 1200px.


    Kann mir jemand einen Tipp geben, wo ich suchen soll? Ich bin mittlerweile echt ratlos.

    Also bei mir funktioniert Dein Code. Vielleicht hast Du Deinen Cache nicht geleert? Grundregel: Nach Änderungen am CSS immer den Cache leeren. Ich nutze dafür die kleine Erweiterung Cache Cleaner von Regularlabs.


    Ich würde noch eine kleine Änderung in der Media-Query vornehmen:

    Code
    .inhalt {
  font-size: calc(1.0rem + 1.0vw);
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (width >= 1200px) {
  .inhalt {
    font-size: 2.5rem;
}


    Was mir nicht so gut gefällt, ist der zentrierte Textblock. Ich finde, dass das nicht so gut zu lesen ist. Vielleicht kannst Du ja links und rechts Margins einbauen, die Viewport-abhängig einen größeren oder kleineren Abstand erzeugen. Und dann die Schrift linksbündig setzen.

    Hallo Dautrich,


    danke für deine schnelle Antwort. Ich hatte den Code auskommentiert, damit das Menü auf kleineren Displays wieder funktioniert. Daher auch die Screenshots. Aber das verwirrt offenbar mehr als es hilft.

    Jetzt habe ich den Code wieder aktiviert und nach deiner Vorgabe angepasst. Jetzt sieht die Seite auf kleineren Displays auch wie auf den beiden rechten Screenshots aus.


    Der Cache war geleert, sowohl in Joomla als auch im Browser.


    PS: Danke auch für den Hinweis mit dem zentrierten Text, da werde ich später ein Auge drauf haben!

    In Deiner media-Query fehlt eine schließende Klammer! das hat den ganzen Schlamassel verursacht. Und ich habe das auch übersehen - shame on me. Dadurch war die media-Query auch noch für die Klasse .flex gültig, was zum Problem geführt hat.


    Richtig ist:


    Ein kleiner Tipp noch: Ich benutze unter Windows für CSS (und auch mal für HTML oder andere Programmiersprachen) den Editor Notepad++. Wenn man ihm sagt, dass es sich um eine CSS-Datei handelt, oder dies automatisch anhand des Suffixes .css erkannt wird, stellt er die Struktur der Datei mit den geklammerten Elementen sauber dar wie im Screenshot:

    Hätte ich Notepad++ genutzt, wäre mir der Syntaxfehler sofort aufgefallen.


    Der Editor hat aber noch viel mehr drauf. Beispielsweise beherrscht er Syntax-Hervorhebung und (halb-) automatische Vervollständigung von Schlüsselwörtern:


    Übrigens: Klein und leichtgewichtig ist der Editor auch.


    Natürlich kann man auch Visual Studio Code (auch z.B. unter Linux) nehmen, aber für die meisten täglichen Arbeiten an CSS-Dateien im Besonderen und allen anderen Arten von Textdateien reicht Notepad++ .