Hallo,
ich versuche gerade, mein Theme via media queries responsiv zu machen. Dazu habe ich (erst einmal) drei Breakpionts eingetragen. Leider funktiert das Ganze aber nicht so wie ich mir das vorgestellt habe.
Das div "rechts" soll eine margin-left von 160px. haben. Hatte es beim ursprünglichen css (ohne media queries) auch. Dann habe ich jedoch die Margin für schmalere Displays verringert und das hat zufolge, dass sie nun auch für große Displays verringert ist.
Hier der entsprechende Code:
/**
* 14.5 - >= 1200px
*/
@media screen and (min-width: 75em) {
#rechts {
background-color: rgba(0, 0, 0, 0.6);
width: 60%;
margin-top: 60px;
margin-left: 160px;
height: auto;
float: left;
display: inline-block;
box-shadow:5px 3px 8px #000000;
}
}
/**
* 14.5 - >= 985px
*/
@media screen and (min-width: 61.5625em) {
#rechts {
background-color: rgba(0, 0, 0, 0.6);
width: 60%;
margin-top: 60px;
margin-left: 80px;
height: auto;
float: left;
display: inline-block;
box-shadow:5px 3px 8px #000000;
}
}
/**
* 14.5 - >= 985px
*/
@media screen and (min-width: 56.875em) {
#rechts {
background-color: rgba(0, 0, 0, 0.6);
width: 60%;
margin-top: 60px;
margin-left: 20px;
height: auto;
float: left;
display: inline-block;
box-shadow:5px 3px 8px #000000;
}
}Wie man sieht soll bei Displays, die größer oder gleich 1200 Pixel breit sind, eine Margin-left von 160px haben. Erst ab 985px Breite soll margin-left dann nur noch 20px groß sein.
Allerdings werden immer 20px ausgeführt - auch bei großen Monitoren.
Hier der Link zur Seite: http://wighty.de/13/
Wenn ich die Anweisungen umdrehe, also die kleinen Displays oben und die großen darunter notiere, tritt der Fehler nicht auf aber dann funktioniert die ganze Sache gar nicht mehr.
Hat jemand eine Idee, was ich falsch mache?
Grüße
Holger