diff --git a/css/basic.css b/css/basic.css index a349ef2..d2cfce7 100644 --- a/css/basic.css +++ b/css/basic.css @@ -40,13 +40,15 @@ pre { } div#page { /* Full-width, responsive container */ - width: min(100vw, 1600px); + width: 100%; + max-width: none; background-color: #fff; margin: 0 auto; text-align: left; border-color: #ddd; border-style: none solid solid; border-width: medium 1px 1px; + box-sizing: border-box; } div#container { padding: 20px; diff --git a/css/galleriffic-2.css b/css/galleriffic-2.css index 131d752..b233426 100644 --- a/css/galleriffic-2.css +++ b/css/galleriffic-2.css @@ -97,25 +97,33 @@ div.navigation { /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ } -/* ---- Layout: thumbs (left) + slideshow (right), full width ---- */ -div#gallery { +/* ---- Layout: slideshow (left) + thumbs (right), full width ---- */ +.gallery-wrap { display: flex; gap: 20px; align-items: flex-start; } -div#thumbs.navigation { - flex: 0 0 360px; - max-width: 40vw; +.gallery-wrap > #gallery.content { + flex: 1 1 auto; + min-width: 0; + order: 1; +} + +.gallery-wrap > #thumbs.navigation { + flex: 0 0 380px; + max-width: 38vw; + order: 2; } @media (max-width: 900px) { - div#gallery { + .gallery-wrap { flex-direction: column; } - div#thumbs.navigation { + .gallery-wrap > #thumbs.navigation { flex: 1 1 auto; max-width: none; + order: 2; } } ul.thumbs { diff --git a/index.html b/index.html index b16e9bc..938a716 100644 --- a/index.html +++ b/index.html @@ -31,33 +31,34 @@ -
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-