CSS: margin-top unkompliziert ändern bei mobilem Endgerät

[Matthias Scharwies]

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.

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
• HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

Herzliche Grüße

Matthias Scharwies