CSS3 Lightbox mit Media Querys

Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. 🙂

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. FĂŒr den kleinen Screen eines iPhones natĂŒrlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhĂ€ngig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer ĂŒberlangen Lightbox erscrollen.

VerĂ€ndert beim testen einfach die FenstergrĂ¶ĂŸe des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

1 thought on “CSS3 Lightbox mit Media Querys”

Leave a Reply

Your email address will not be published. Required fields are marked *