dynamischeres Omega
Eingetragen von Calebius (1)am 23.03.2012 - 16:00 Uhr in
Hallo zusammen,
Ich versuche mich gerade daran mit Omega 3.0 für Drupal 7.12 eine dynamische Website zu erstellen. Das responsive grid funktioniert dabei für normale Bildschirme und kleine Mobilgeräte auch ganz gut, nur gibt es scheinbar nix dazwischen.
Genauer: Ich habe in der normalen Auflösung in 2 Zeilen jeweils 3 Regionen. Verringere ich jetzt die Bildschirmgröße schieben sich die Regionen (ab 768 Pixeln Breite) merkwürdig übereinander und erst unter 640 Pixeln werden sie untereinander angeordnet. Allerdings heißt untereinander auch dass alle 6 Regionen nun eine Schlange bilden. Kennt also einer von Euch eine Möglichkeit wie man dafür sorgen kann, dass die Regionen sich bei mittleren Auflösungen in 3 Reihen zu je 2 Regionen anordnen?
Besten Dank im Voraus, ein schönes Wochenende und beste Grüße,
Calebius
- Anmelden oder Registrieren um Kommentare zu schreiben
Hast du denn die CSS-Dateien
am 23.03.2012 - 20:28 Uhr
Hast du denn die CSS-Dateien für die unterschiedlichen Bildschirmgrößen angepasst (zu finden in sites/all/themes/DEIN_THEME/css)? Wichtig bei der Themeentwicklung mit Omega ist das genaue Verständnis, wie die CSS-Dateien in diesem Verzeichnis zusammenspielen, erklärt ist dies hier: http://drupal.org/node/1298700. Siehe dort auch den "Mobile-First"-Absatz, d.h erst die mobile Version über die global.css entwickeln, dann über die einzelnen CSS-Files immer weiter in die Breite themen.
Bei Omega bist voll flexibel
am 24.03.2012 - 13:58 Uhr
ich habe als grid-system 960px ausgewählt
und dann kann dann in den viewport-settings jeweils das Layout anpassen
dazu gehört auch die Media-Query
Ich habe folgnde und du bestimmt auch Reihenfolge nach Gewichtung):
all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)
all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
all and (min-width: 1220px)
Das kannst du natürlich alles anpassen und auch die zugehörigen css-Dateien: