✔ Probleme mit responsive Design

L

lolhonk

Mitglied
Hi,

ich habe ein grid mit images erstellt, dass in der desktop-version 5 Spalten hat. In der Tablet-Version 4 und in der Mobile-Version sollen 3 Spalten angezeigt werden. Leider klappt das in der mobile-version nicht, dort wird immer nur 1 Spalte angezeigt. Und ich finde einfach nicht den Grund dafür. Hat jemand eine Idee?

Code: 
.galerie-uebersicht {
    -moz-column-count: 3 !important;
    -moz-column-gap: 0;
    line-height: 0;
    text-align: center;

}
.galerie-bild-uebersicht img {
    border: 1px solid white;
    height: auto !important;
    width: 100% !important;
}

das ist der css code.

anschauen kann man sich das Ganze hier:

http://176477.webhosting69.1blu.de/gutekunst/

und zwar unter portfolio -> natur

wenn ich mir die seite mit dem "web developer" addon für firefox anschaue und dort "responsive-designs" wähle. Wird die Seite ja so angezeigt wie sie als tablet, mobile etc. aussieht. dort werden mir in der mobile ansicht auch die 3 Spalten angezeigt. Wenn ich meine Seite jedoch mit meinem Smartphone öffne eben nur 1 Spalte.

Hoffe ich konnte es irgendwie deutlich machen. Bin leider nicht so fit in css und jetzt auch noch alles responsive machen das ist echt ein Fluch :-(

LG
 
Hi,
ich hoffe dir ist bewusst das dies nur im Firefox funktioniert.
Von den Spalteneigenschaften im CSS würe ich noch die Finger lassen, auch wenns darin juckt ;).
Denn es gibt min. zwei verschiedene Ansätze und es ist noch nicht mal klar ob das jemals ins CSS3 übernommen wird.
Nimm lieber ein CSS-Gridsystem wie 960.gs oder cssgrid.net oder gleich ein ganzes Framework wie Bootstrap.
Dann must du nicht für jede Auflösung das Verhalten einstellen. Den das kann ganz schön ausarten.

Viele Grüße
 
Oha stimmt, daran hab ich gar nicht gedacht DANKE ;-) ! D.h. die Mobil-browser unterstützen diesen Befehl leider nicht, deshalb auch nur die 1 Spalte :)

Wie könnte ich dieses Grid ohne die Spalteneigenschaften mit CSS hinbekommen?

So ein fertiges Gridsystem werde ich wohl beim nächsten mal verwenden. Danke für den Tip!

UPDATE: mein smartphone browser scheint den "column-count:XX" Befehl doch zu erkennen (auf meiner anderen website werden 3 Spalten auch mit dem Smartphone angezeigt) D.h. das Problem muss noch wo anders liegen. Hast du noch ne Idee?

UPDATE 2: OK hab das Problem gefunden. Ich musste die "width" eines der div's noch mit einer "min-width" versehen. Jetzt klappts.

UPDATE 3: Hab allerdings noch eine Unschönheit entdeckt. Die Website hat auf dem smartphone rechts etwa einen 20px breiten weißen Balken. An was liegt das?


LG
 
Zuletzt bearbeitet:
Hi,
also cih kann dir sagen das der Google Browser Chrome das nicht unterstützt.
Die Prefixe -moz, -webkit sagen an das diese Implementierung nur in den entsprechenden Browsern funktionieren.

Der Einbau eines solchen Gridsystems kannst du ja jederzeit vornehmen. Das kostet keine Zeit.
Einfach css-Datei rein und entsprechende Klassen verwenden.
Du kannst das ja auch verwenden ohne deine jetzige Seite komplett umzuschreiben.

Den ich prognostiziere dir schon jetzt dass dies nicht das einigste Problem sein wird an dem die Realisation deiner Responive Webseite kranken wird.

Viele Grüße
 
Ich kenne mich nicht groß mit responsive Design aus... basiert das auf JS oder geht das ohne? Ist das was ANDERES als, wenn man mit "media" jeweils ein Stylesheet für "screen", "handheld", "mobile" definiert?

Das mit "Stylesheet" für drei Endgeräte scheint mir jetzt spontan mal einfacher/vertrauter... kann ich davon ausgehen, dass diese Stylesheets dann auch 100pro entsprechend korrekt anspringen, bei jedem Tablet, bei jedem Smartphone, immer passend?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück