[wrestler]

Hallo zusammen

Ich habe festgestellt, dass mein responsive CSS je nach Handytyp unterschiedlich reagiert.

work | 2LB
Auf dem iPhone 5 ist das Layout zweispaltig, auf dem Samsung Galaxy 3 nur einspaltig.

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Danke im Voraus!
Wrestler

[cloned]

Auf deinem ersten Screenshot ist auch kein Platz für eine zweite Spalte, insofern verstehe ich dein Problem nicht? Responsive heißt ja, dass es sich anpasst. Und das tut dein Layout.

[wrestler]

Meine Frage ist:

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Muss man für jeden Handytyp ein spezielles CSS schreiben, oder gibt es allgemeingültige Lösung?

[K.Roland]

Zitat von wrestler

Auf dem iPhone 5 ist das Layout zweispaltig, auf dem Samsung Galaxy 3 nur einspaltig.

Ich habe mal bei mir auf meinem iPhone 4 S getestet.

Ja es wird zweispaltig angezeigt, aber wechsel ich zu Ansicht Querformat und wieder zurück Dan nur einspaltig.
Wie auf dem Bild von dir.

Oder ich muss neu Aktualisieren.

____________
MfG Roland

[cloned]

Zitat von wrestler

Meine Frage ist:

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Muss man für jeden Handytyp ein spezielles CSS schreiben, oder gibt es allgemeingültige Lösung?

Eine zwar blöde, aber richtige Antwort:
Indem du dich mit responsive Webdesign auseinandersetzt.
Du gibst einfach deinen Artikel 50% Breite, dann passt es immer, dass sich 2 nebeneinander ausgehen. Auch auf Handys, die nur 200px in der Breite Platz haben. Ob das sinnvoll ist, sei mal dahingestellt (Das hat dann ja wieder was mit responsive Webdesign zu tun)

[wrestler]

Es geht nicht um responsiv hier. Das funktioniert soweit schon.
Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.

Mit Prozentwerten funktioniert es leider auch nicht.

[K.Roland]

Zitat von wrestler

Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.

Ja, weil Dan der Platz nicht ausreicht, der endet für zwei Spalten ab einer weite bei 319 Pixel.
Siehe selbst: im Firefox Strg + Shift + M,

Bedenke auch längere Wörter wie zum Beispiel Glückswunschkarte, passt auch nicht bei 150 Pixel.

<a href="/work/gl%C3%BCckswunschkarte-hochzeit">Glückswunschkarte (Hochzeit)</a>

Und bei Media Queries auch nur das hinzufügen, was man auch verändern möchte.

Hier mal doppeltes Unnötiges entfernen.

}
#isotope-container { 
    padding: 0 10px; 
}
.isotope-element {
    background: none repeat scroll 0 0 #bebebe;
    color: #fff;
    float: left;
    height: 150px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    width: 150px;
}
.isotope-element img {
    margin: 0 auto;
    text-align: center;
    width: 150px;
}
#isotope-container .isotope-element {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    height: auto;
    margin: 0 10px 10px 0;
    transition-property: all;
    width: 200px;
}
@media only screen and (max-width: 560px) {
#isotope-container .isotope-element {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    float: left !important;
    height: auto;
    margin: 0 10px 10px 0;
    transition-property: all;
    width: 140px;
}
#isotope-container .isotope-element IMG {
    width: 140px;
}
}

_____________
MfG Roland

[Thielo]

Zitat von wrestler

Es geht nicht um responsiv hier. Das funktioniert soweit schon.
Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.

Mit Prozentwerten funktioniert es leider auch nicht.

Ersetze das "unterschiedliche Handys" durch "unterschiedliche Viewportbreiten"

aber hey, das hat nichts mit responsive zu tun... überhaupt nicht....