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