Fehler bei Breakpoint bei Responsive Design

[cdash]

Hallo,

ich habe ehrenamtlich für eine Benefizveranstaltung einen Onepager (statisches HTML) gebaut: www.kirchekickt.de Es gibt drei Breakpoints (600px, 900px, 1200px) und unterhalb von 600px und oberhalb von 900px sieht auch alles OK aus. Aber bei einer Breite von 900 Pixeln floaten in der Anmeldung die Spalten nicht nebeneinander?

Ich habe mir das im Firebug angeschaut und die Breite der Elemente ist in Ordnung. Da sollte eigentlich genung Platz sein. Auch ändert sich innerhalb der MediaQueries außer der Breite des umgebenden divs nichts von Breakpoint 900px zu Breakpoint 1200px. Und die Breite der inneren Elemente ist mit Prozentwerten gemacht.

Mir ist nicht klar, warum die Formularspalten nicht nebeneinander floaten. Hat jemand eine Ideen dazu?

PS: Ich bitte um Rücksicht, was das JS angeht. Man müsste die Höhe des Kontaktformulars noch on Resize anpassen - und überhaupt kann ich kein JS. Das ist eine andere Baustelle

/* Media Queries */  
/* alternate state for layout items on mobile devices */  
@media screen and (min-width: 600px) {  
  .l-constrained {  
    width: 600px;  
  }  
  /* Logo */  
  .logo {  
    background: url(../css_img/logo-kirchekickt.png);  
    height: 168px;  
    width: 160px;  
  }  
  .main-menu li {  
    font-size: 1.3em;  
  }  
}  
/* alternate state for layout items on narrow screens */  
@media screen and (min-width: 900px) {  
  .l-constrained {  
    width: 900px;  
  }  
  /* Grid */  
  .l-grid {  
    float: left;  
  }  
  .l-grid--1 {  
    width: 98%;  
  }  
  .l-grid--2 {  
    width: 48%;  
  }  
  .l-grid--3 {  
    width: 31.333%;  
  }  
  /* Header */  
  .l-header {  
    height: 130px;  
    padding: 40px 0 0 0;  
  }  
  /* Navigation */  
  .main-menu {  
    margin-top: 80px;  
  }  
  .main-menu li {  
    float: left;  
    margin: 0 0 0 15px;  
    background-color: transparent;  
    padding: 0;  
  }  
  .main-menu a {  
    color: #ffffff;  
  }  
}  
/* alternate state for layout items on wide screens */  
@media screen and (min-width: 1200px) {  
  .l-constrained {  
    width: 1200px;  
  }  
}

Danke

Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, cdash!

Das untere der beiden Div-Elemente hat keinen Grund, rechts zu sein weil es niemandem im Weg steht. Es floatet also ganz nach links. Einfache Lösung könnte sein, per

.l-grid.l-grid--2 + .l-grid.l-grid--2 {  
   margin-left: wert%;  
}  
/* ungetestet */  
/* vor allem nicht auf Nebenwirkungen hin getestet */

einen linken Abstand zu erzeugen. Das darf natürlich nur innerhalb der entsprechenden MQ geschehen

Matthias

[cdash]

Danke, aber ...

Du hast mich auf die richtige Spur gebracht. Es ist nicht das untere div, dass sich nicht so verhält wie erwartet sondern das obere. Obwohl das obere div. links floatet steht es rechts?

Das ist aber, weil von den divs darüber das linke höher ist (Zeilenumbruch) als das rechte. So erklärt sich der Fehler auch bei den unterschiedlichen Breakpoints. Bei 1200px sind die Inhalte beider divs zweizeilig.

Danke

Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, cdash!

Du hast mich auf die richtige Spur gebracht. Es ist nicht das untere div, dass sich nicht so verhält wie erwartet sondern das obere. Obwohl das obere div. links floatet steht es rechts?

Ja, weil da noch ein div-Element „im Weg“ ist, das ebenfalls links gefloatet ist. Float gibt (auch) an, wie sich nachfolgende Elemente verhalten sollen. (Was zum lesen: elmastudio)

Matthias