Servus! > Guten Morgen, > die Darstellung einer meiner Seiten funktioniert auf meinem Desktop. Sehr gut! >Auf meinem Smartphone klappt die Darstellung noch nicht, Schriftgröße und Positionierung bekomme ich noch nicht so hin, dass es vernünftig aussieht, obwohl ich schon mehrere Ansätze im Netz gefunden und ausprobiert habe. Könnt ihr mir eine Empfehlung für eine Vorgehensweise geben? Ja, **Mobile first!** Zuerst erstellt man eine Webseite mit korrektem HTML. Das wird ohne CSS richtig angezeigt und von Screenreadern vorgelesen. Die erste Variante des CSS wird für Mobilgeräte optimiert - also alle Blockelemente 100% Breite (ohne CSS-Festlegung) und automatisch untereinander angeordnet. Im zweiten Schritt schaut man, wo man Elemente nebeneinander platzieren kann und legt mit media queries Regeln fest. Im Wiki: [CSS/Tutorials/Einstieg/**Webseiten_responsiv_umbauen**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen) Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Servus! > Guten Morgen, > die Darstellung einer meiner Seiten funktioniert auf meinem Desktop. Sehr gut! >Auf meinem Smartphone klappt die Darstellung noch nicht, Schriftgröße und Positionierung bekomme ich noch nicht so hin, dass es vernünftig aussieht, obwohl ich schon mehrere Ansätze im Netz gefunden und ausprobiert habe. Könnt ihr mir eine Empfehlung für eine Vorgehensweise geben? Ja, **Mobile first!** Zuerst erstellt man eine Webseite mit korrektem HTML. Das wird ohne CSS richtig angezeigt und von Screenreadern vorgelesen. Die erste Variante des CSS wird für Mobilgeräte optimiert - also alle Blockelemente 100% Breite (ohne CSS-Festlegung) und automtisch untereinander angeordnet. Im zweiten Schritt schaut man, wo man Elemente nebeneinander platzieren kann und legt mit media queries Regeln fest. Im Wiki: [CSS/Tutorials/Einstieg/**Webseiten_responsiv_umbauen**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen) Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)