Title: Responsive Design Last modified: 28. Januar 2021 --- # Responsive Design * Gelöst [philipp2208](https://de.wordpress.org/support/users/philipp2208/) * (@philipp2208) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/) * Hallo, * hab ja schon fast ein schlechtes Gewissen hier immer die kostenlose Hilfe in Anspruch zu nehmen aber vielleicht könnt ihr mir einfach einen Tip geben, wo ich anfangen kann? Die Webseite funktioniert jetzt soweit und ich bin dabei die Sichtbarkeit zu verbessern. Allerdings sind auf dem Smartphone ein paar Schnitzer und Unstimmigkeiten, die ich gerne verbessern würde. Gibt es denn Möglichkeiten nur die Version zu ändern oder anzupassen, die auf dem Smartphone angezeigt wird, ohne die Hauptseite zu ändern? * danke * Philipp * Die Seite, für die ich Hilfe brauche: _[[Anmelden](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fde.wordpress.org%2Fsupport%2Ftopic%2Fresponsive-design%2F%3Foutput_format%3Dmd&locale=de_DE), um den Link zu sehen]_ Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6) * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100616) * Hallo, vermutlich kannst du das über ein paar entsprechende CSS-Regeln unter Design > Customizer > Zusätzliches CSS einstellen (Stichwort Media Query). Aber das ist dann weniger eine WordPress-Frage. Am besten schaust du dir entsprechende Hinweise [auf der folgenden Seite](https://developer.mozilla.org/de/docs/Web/CSS) bezogen auf CSS an. Viele Grüße Hans-Gerd * Thread-Starter [philipp2208](https://de.wordpress.org/support/users/philipp2208/) * (@philipp2208) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100619) * Hi Hans-Gerd, * also CSS generell ist eigentlich nicht das Problem, für mich stellt sich eher die Frage wo ich denn das entsprechende Design, das bei einem kleinen Bildschirm wie dem Smartphone aufgebaut wird, in meinem Theme entsprechend anpassen kann. Im Stylesheet „style.css“ finde ich da jetzt irgendwie nichts. * Moderator [Bego Mario Garde](https://de.wordpress.org/support/users/pixolin/) * (@pixolin) * Moderator (nicht mehr aktiv) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100624) * Eine Seite mit einer CSS-Regel `body { width: 960px; }` ist nicht responsive, weil die Breite auf jedem Gerät gleich bleibt, egal wie die Auflösung des Displays ist. Verwendest du ein Display mit einer Breite von 375 Pixeln, werden 585 Pixel angeschnitten. Das Layout reagiert nicht auf die tatsächliche Bildschirmbreite. * Eine Seite mit einer CSS-Regel `body { width: 90%; }` passt immer die Breite der Seite auf 90% des Bildschirms an, egal ob du am 4K-Bildschirm sitzt oder die Webseiten auf dem Smartphone anschaust. Das nennt sich dann responsive Design. Die Anpassung erfolgt automatisch und daran kannst du nicht viel ändern – Prozent bleibt Prozent. * Möchte ein Entwickler aber, dass eine Seite auf großen Displays nur 60% der Breite des Displays einnimmt, bei kleineren Displays aber die volle Breite, lässt sich das über eine MediaQuery einstellen. * ``` body { width: 60%; } @media screen and {max-width: 600px} { body { width: 100% }; } ``` * Du kannst als ein responsive Design doch ändern, entweder indem du eigene MediaQueries hinzufügst oder indem du vorhandene MediaQueries anpasst. Soll die Seite auf kleinen Displays nur 90% Breite einnehmen, erstellst du im Customizer unter Zusätzliches CSS (oder im Stylesheet eines Child Theme) eine eigene Media-Query: * ``` @media screen and {max-width: 600px} { body { width: 90% }; } ``` * Die CSS-Regel wird später geladen als die Regel im Theme und überschreibt deshalb die Werte dort. * Welche Regeln dein Theme verwendet, kannst du über die Entwickler-Tools des Browsers herausfinden. Für jemanden mit CSS-Kenntnissen ist das manchmal eine aufwendigere Suche, während jemand ganz ohne CSS-Kenntnisse sich wahrscheinlich überfordert fühlt. Also entweder CSS lernen (im Web gibt es tolle Tutorials) oder jemand beauftragen, der sich auskennt. * Thread-Starter [philipp2208](https://de.wordpress.org/support/users/philipp2208/) * (@philipp2208) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100628) * Alles klar, ich probier mal ein bisschen rum und würde mich dann gegebenenfalls nochmal melden… * Moderator [Bego Mario Garde](https://de.wordpress.org/support/users/pixolin/) * (@pixolin) * Moderator (nicht mehr aktiv) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100630) * Schau mal: * [⌊Screenshot Einstellungen⌉⌊Screenshot Einstellungen⌉[ (zum Vergrößern anklicken) * Wenn ich auf der Startseite einen Rechtsklick mache und dann auf Element untersuchen gehe, öffnet sich der dunkle Bereich unten. Links ist das HTML (ich habe das ` `-Tag angeklickt), rechts siehst du die zugehörigen CSS-Regeln. Dabei ist auch eine MediaQuery (Pfeil). Du kannst in den Entwickler-Tools einen anderen Wert eingeben (z.B. 90% statt 100%) und siehst direkt, wie sich das auswirkt. Wenn dir die Änderung gefällt, kopierst du die CSS-Regel und fügst sie im Customizer unter zusätzliches CSS ein. * Thread-Starter [philipp2208](https://de.wordpress.org/support/users/philipp2208/) * (@philipp2208) * [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100633) * ja, das kenne ich. Ganz konkret ist mein Problem, dass auf dem Smartphone, die Ecken bei einigen Seiten nicht so richtig aufeinanderpassen und im unteren Bereich teilweise ein einfarbiger Hintergrund erscheint, der da nicht sein sollte. Ich würde auch ganz gerne die Startseite für Mobile Geräte ein wenig anders gestalten. Also der [@media](https://de.wordpress.org/support/users/media/) Tip war schon ganz gut… Ich versuch da dann morgen mal das besser hin zu kriegen. danke Dir! Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6) Das Thema „Responsive Design“ ist für neue Antworten geschlossen. * In: [Themes](https://de.wordpress.org/support/forum/themes/) * 6 Antworten * 3 Teilnehmer * Letzte Antwort von: [philipp2208](https://de.wordpress.org/support/users/philipp2208/) * Letzte Aktivität: [vor 5 Jahren, 6 Monaten](https://de.wordpress.org/support/topic/responsive-design/#post-100633) * Status: gelöst ## Themen ### Beliebteste Themen ### Unbeantwortete Themen ### Nicht-Support-Themen ### Gelöste Themen ### Ungelöste Themen ### Alle Themen