- 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:
.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.