Bildschirm Anzeige fehlerhaft
-
Hallo Community,
ich bin noch ein WordPress-Neuling und habe mich an den ersten Seiten für Kollegen herangearbeitet. Aktuell arbeite ich an einer Art Unternehmens-Blog-Seite (noch nicht von Suchmaschinen auffindbar).
Als Theme nutze ich Kadence (Free Version) sowie den Elementor Page Builder (Free Version) mit natürlich dem ein oder anderen Plugin wie Premium Addons für Elementor.
Leider habe ich einen Darstellungsfehler auf der Startseite der Website. Ich habe hier für das Titelbild und den Inhalt die Einstellung „Layout – an Bildschirm anpassen“, Abstände und Positionen auf Vorgabe, vorgenommen. Das sieht auch auf einem 27 Zoll Monitor perfekt aus. Auch sämtliche Einstellungen für ein Responsive Design funktionieren gut – Mobile und Tablet im Hochformat also kein Problem.
Ziehe ich nun jedoch das Browserfenster Beispielsweise auf meinen Laptop, so passt sich zwar das Hintergrund-Bild an die neue Bildschirmgröße an, der enthaltene Text wird jedoch nicht verkleinert sondern einfach abgeschnitten. Scrolle ich also etwas runter, kann ich nicht mehr den ganzen Inhalt des Textes sehen und damit auch nicht enthaltene Buttons etc. Dasselbe passiert, wenn ich am Smartphone die mobile Ansicht aufrufe und dann auf Querformat wechsle – obwohl das Hochformat des Tablets die responsive Einstellung übernimmt…
Bisher kann ich Abhilfe schaffen, indem ich den enthaltenen Text einfach extrem verkleinere, sodass es auf den meisten Bildschirmen passt. Dann schaut`s jedoch auf größeren Bildschirmen eher unvorteilhaft aus. Oder ich nutze die Funktion „Layout – Höhe – Min.Höhe“ und nehme als Maximum die eines 27 Zoll Monitors. Auch das stoßt mir allerdings etwas auf.
Gibt es bspw. die Möglichkeit die Schriftgröße im enthaltenen Text für unterschiedliche Desktop-Größen zu ändern (also über die reguläre Änderung für Dekstop->Tablet->Mobil hinaus)? CSS Möglichkeiten sind mir bekannt, allerdings bin ich hier noch Anfänger…
Ich hoffe ihr könnt mir helfen. Danke schon mal im Voraus!
VG,
NikoDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Vielleicht solltest du dich erst einmal mit dem Begriff „Responsive Webdesign“ vertraut machen, zu dem du im Web (auch als Video auf Youtube) viele Anleitungen findest. Bei der Erstellung einer Webseite von einer bestimmten Bildschirmgröße auszugehen ist sicher der falsche Ansatzpunkt.
Grundsätzlich besteht die Möglichkeit, „Breakpoints“ festzulegen, ab denen sich ein Layout ändern soll – also z.B. ein Abschnitt mehrspaltig statt einspaltig dargestellt werden soll. Elementor bietet dir dazu Einstellungsmöglichkeiten für die Anzeige auf mobilen Endgeräten, Tablets und Desktop-PCs.
Gibst du zum Beispiel in einem einspaltigen Abschnitt Text ein, kannst du über die Auswahl der Anzeige für Destop, Tablet oder Smartphone [1] festlegen, ob der Text zweispalig [2] oder in einem anderen Layout ausgegeben werden soll:
Auch für einen Abstand kannst du so unterschiedliche Höhen für unterschiedliche Geräte festlegen:
Hallo und vielen Dank für die schnelle Rückmeldung!
Vielleicht habe ich mich falsch ausgedrückt. Problem bereit mir nicht zwingend das responsive design. Die mobile Ansicht habe ich natürlich mit den Mitteln von Elementor entsprechend angepasst und das funktioniert auch einwandfrei.Mein Problem besteht darin, dass mir die Desktop Ansicht auf unterschiedlichen Monitoren Probleme macht. Zur besseren Veranschaulichung hier mal ein paar Screeshots
Desktop-Ansicht auf einem größeren Bildschirm:
Desktop-Ansicht auf meinem 14 Zoll Laptop inkl. Problematik des abschneidenden Textes sobald ich scrolle:
Es ändert sich also die Größe der Schriftart nicht mit. Ich habe sämtliche Typographie-Größen-Optionen ausprobiert (em, rem, px…) hat aber nichts gebracht.Bei der mobilen Ansicht ändert sich dann die Größe des Textes ebenfalls nicht, wenn man ins Querformat wechselt.
Mobile Ansicht (vertikal):
Mobile Ansicht Querformat (horizontal):
Das mit den Breakpoints scheint wohl eine Möglichkeit zu sein und ich werde diese mal ausprobieren. Ich dachte es gibt hier vielleicht einen „einfacheren Fehler“ den ich gemacht habe.
Danke und Gruß,
Niko-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
.
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
Deine Antwort war wegen der Links als möglicher Spam in der Moderationswarteschlange. Da wir hier alle in unserer freien Zeit helfen, kann es ein bisschen dauern, bis jemand sich darum kümmert. (Wobei, hey, 20 Minuten ist doch gar nicht so übel.)
Wenn du in Elementor Text eingibst, kannst du auch wieder über einen Menüpunkt „Typographie“ unterschiedliche Schriftgrößen für Desktop, Tablet und Smartphone eingeben [1]. Außerdem hast du die Wahl zwischen der Größenangaben in festen Pixeln (px), abhängig vom Font (em – entspricht der breite des Buchstaben „m“ der gewählten Schriftart), relativer Größenangabe (rem – „root em“ – also relativ zu Größe der Grundschriftart) und relativer Größe zur Displaybreite (vw – viewport width – Größe relativ zur Breite des Viewports).
Leider sprengt es ein wenig den Rahmen, hier Grundlagen von CSS und responsive Webdesign zu vermitteln. Dafür gibt es wie gesagt im Web tolle Tutorials, auch als Video.
-
Diese Antwort wurde geändert vor 3 Jahren, 3 Monaten von
- Das Thema „Bildschirm Anzeige fehlerhaft“ ist für neue Antworten geschlossen.