|
|||
Layout für jedes Handy
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 |
Sponsored Links |
|
|||
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.
|
Sponsored Links |
|
|||
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? |
|
|||
Zitat:
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 Geändert von K.Roland (18.09.2014 um 23:21 Uhr) |
|
|||
Zitat:
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) |
|
|||
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. |
|
|||
Zitat:
Siehe selbst: im Firefox Strg + Shift + M, Bedenke auch längere Wörter wie zum Beispiel Glückswunschkarte, passt auch nicht bei 150 Pixel. HTML-Code:
<a href="/work/gl%C3%BCckswunschkarte-hochzeit">Glückswunschkarte (Hochzeit)</a> Hier mal doppeltes Unnötiges entfernen. Code:
} #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 |
|
||||
Zitat:
aber hey, das hat nichts mit responsive zu tun... überhaupt nicht....
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Was bevorzugt ihr - fixes, fluides oder elastisches Layout | mimii | CSS | 0 | 19.12.2011 20:12 |
Bitte um Hilfe - CSS und Prozentangaben | sprefer | CSS | 3 | 01.03.2011 04:11 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 22:40 |
Firefox 2 "zerhackt" Layout | Pino | CSS | 3 | 18.02.2007 12:39 |