Servus! > Hallo Leute, > > ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind. > > Folgender Code: > > `<div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;">` > > funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript? Ja, natürlich! Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren. ~~~ CSS div { opacity: 0.7; margin-top: 10%; background-color:grey; width:100%; /* ist bei div-Elementen sowieso 100% */ } @media (min-width: 30em) { div { margin-top: 5%; } } ~~~ * [CSS/Media Queries](https://wiki.selfhtml.org/wiki/CSS/Media_Queries) * [HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Servus! > Hallo Leute, > > ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind. > > Folgender Code: > > <div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;"> > > funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript? Ja, natürlich! Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren. * [CSS/Media Queries](https://wiki.selfhtml.org/wiki/CSS/Media_Queries) * [HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“