Große Headlines mit variablen Größen optimal mit CSS darstellen
Konkret nehme ich einmal ein klassisches Problem und gehe hier ganz kurz auf die verwendeten CSS Anweisungen ein: Eine Videoelement auf einer Startseite mit einer großen, mehrzeiligen Headline über das Video gelegt. Die Höhe des umschließenden Elements mit position:relative wurde mittels height: 100vh eingestellt. Damit passt sich das Element dem Bildschirm in der Höhe an. Es braucht natürlich noch etwas mehr CSS damit das Video darin immer schön Formatfüllen abgebildet wird, aber dies sollte jeder mit CSS Know-How hin bekommen.
Die Headline wird mittels position:absolut und bottom:20% entsprechend über dem Video platziert, ggf. braucht es noch ein z-index. Statt einer fixen Schriftgröße soll mit vh oder vw gearbeitet werden. Das funktioniert je nach Werten auch recht gut und mittels Methoden wie z.B. @media screen and (min-width: 1024px) kann man da auch immer je nach Bildschirmgröße nach justieren.
Probleme bereiten in dem Fall aber besonders die Smartphone Ansichten. Im Hochformat funktioniert vh ganz gut, im Querformat (Landscape) ist vw besser. Da aber beide Darstellungen gut funktionieren sollen, ist das keine Lösung. Die Verwendung von vmax um Größen zu beschränken sollte ausprobiert werden.
Eine sehr gute Methode ist @media screen and (orientation:landscape) zu nutzen, um speziell für die Landscapedarstellung Einstellungen vorzunehmen. Besonders in Verbindung mit vmax lassen sich damit die beiden exterm unterschiedlichen Bildschirmdarstellung am Smartphone bei Hoch- und Querformat schnell in den Griff bekommen. Es ist dann möglich die Headline gut einzupassen so das Sie auf jeder Darstellungsmethode sauber anzeigt wird. Natürlich steht und fällt vieles mit der Textmenge und wenn sich im Text öfters etwas ändert ist immer das Überarbeiten wichtig.
Dies alles geht jetzt natürlich nicht sehr in die Tiefe und man muss CSS schon beherrschen um damit arbeiten zu können, aber es soll auch nur als Ansatz dazu dienen, das Problem lösen zu können. Ich empfehle dazu auch einmal hier rein zu schauen: https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/
Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?
Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann
oder per Telefon: 07223 / 91 59 372
Fragen Sie den Contao Spezialisten
Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte erstellt wurden. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen groben Preis nennen. Die Anfrage bei mir als alleine kostet dabei nichts!
