Contao 3 Grundkurs

Ein Media Query als Problemlöser

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Stylesheet "layout.css", das der Layout-Builder einbindet, wird ein Media Query benutzt, um Geräte mit einem Viewport schmaler als 768 Pixel anzusprechen. Nutzen Sie dieses Verfahren, um Ihr Design für solche Geräte anzupassen.
02:53

Transkript

Mit Media Queries kann man CSS schreiben, das ganz bestimmte Viewports adressiert. Also Bildschirmbreiten bis einer bestimmten Pixel-Größe. Contao nutzt das auch hier in der Layout-CSS, um zum Beispiel das Holy Grail umzusetzen. Nun gibt es ganz viele Endgeräte mit ganz unterschiedlichen Abmessungen. Da fragt man sich unweigerlich: Wie kommt Contao jetzt auf die 767? Ja... Die Antwort... Wir schauen uns mal eine Tabelle an. Die ist relativ lang. Da können wir sehen, dass Contao sich in dem Fall am iPad orientiert. Der hat eine Breite von 768 Pixel im Hochformat und das ist genau die Größe, die hier unterschritten wird. Wir werden jetzt die selbe Technik verwenden, um unsere Probleme in den Griff zu bekommen. Also gehen Sie ins Back-End, legen Sie ein neues Style-Sheet an, das Sie so definieren: Der Name responsive-767 und als Media-Query tragen Sie hier ein: (Max-width:767px). Also das, was wir auch im Layout-CSS gesehen haben, nur ohne @media, das hängt Contao für uns davor. Speichern und Bearbeiten. Nehmen wir jetzt beispielhaft unseren Slogan, den hatten wir ja absolut positioniert und das werden wir jetzt rückgängig machen: Also Slogan Der soll jetzt relativ positioniert werden und bekommt jetzt eine Aufhebung durch Auto und wir Speichern diese Regel ab. Jetzt müssen wir noch unser neues Style-Sheet in die Seiten-Layouts einbinden. Das machen wir und zwar in beide. Nummer eins, hier ist unser responsive und Nummer zwei responsive, Speichern und Schließen Und jetzt schauen wir uns das Ganze im Front-End an. Mit Beachtung des Slogans, einmal neu laden. Und jetzt schieben wir die Seite kleiner und da ist der Slogan nach unten links gerutscht. Prinzipiell ist also das unser Lösungsansatz. Wir rücken die Dinge für schmalere Viewports entsprechend zurecht. À propos Zurechtrücken, es ist natürlich auch nicht gerade erfreulich immer das Browser-Fenster groß und klein zu schieben. Und deshalb brauchen wir dafür jetzt erstmal ein Werkzeug.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!