diff --git a/css/basic.css b/css/basic.css
index 1cc8630..a349ef2 100644
--- a/css/basic.css
+++ b/css/basic.css
@@ -39,7 +39,8 @@ pre {
 	overflow-x: auto;
 }
 div#page {
-	width: 900px;
+	/* Full-width, responsive container */
+	width: min(100vw, 1600px);
 	background-color: #fff;
 	margin: 0 auto;
 	text-align: left;
diff --git a/css/galleriffic-2.css b/css/galleriffic-2.css
index c48c0fb..131d752 100644
--- a/css/galleriffic-2.css
+++ b/css/galleriffic-2.css
@@ -1,8 +1,9 @@
 div.content {
 	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
 	display: none;
-	float: right;
-	width: 550px; 
+	float: none;
+	flex: 1 1 auto;
+	min-width: 0;
 }
 div.content a, div.navigation a {
 	text-decoration: none;
@@ -27,7 +28,8 @@ div.nav-controls {
 div.slideshow-container {
 	position: relative;
 	clear: both;
-	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+	height: 70vh; /* responsive */
+	min-height: 420px;
 }
 div.loader {
 	position: absolute;
@@ -36,8 +38,8 @@ div.loader {
 	background-image: url('loader.gif');
 	background-repeat: no-repeat;
 	background-position: center;
-	width: 550px;
-	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+	width: 100%;
+	height: 100%;
 }
 div.slideshow {
 
@@ -50,9 +52,9 @@ div.slideshow span.image-wrapper {
 }
 div.slideshow a.advance-link {
 	display: block;
-	width: 550px;
-	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
-	line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+	width: 100%;
+	height: 100%;
+	line-height: 1;
 	text-align: center;
 }
 div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
@@ -61,10 +63,9 @@ div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.sli
 div.slideshow img {
 	vertical-align: middle;
 	border: 1px solid #ccc;
-	min-height: 510px;
-	min-height: 510px;
-	max-width: 520px;
-	max-height: 520px;
+	max-width: 100%;
+	max-height: 100%;
+	height: auto;
 }
 div.download {
 	float: right;
@@ -77,7 +78,7 @@ div.caption-container {
 span.image-caption {
 	display: block;
 	position: absolute;
-	width: 550px;
+	width: 100%;
 	top: 0;
 	left: 0;
 }
@@ -95,6 +96,28 @@ div.image-desc {
 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 {
+	display: flex;
+	gap: 20px;
+	align-items: flex-start;
+}
+
+div#thumbs.navigation {
+	flex: 0 0 360px;
+	max-width: 40vw;
+}
+
+@media (max-width: 900px) {
+	div#gallery {
+		flex-direction: column;
+	}
+	div#thumbs.navigation {
+		flex: 1 1 auto;
+		max-width: none;
+	}
+}
 ul.thumbs {
 	clear: both;
 	margin: 0;
diff --git a/js/bestpic.js b/js/bestpic.js
index 7155f3c..2beead2 100644
--- a/js/bestpic.js
+++ b/js/bestpic.js
@@ -29,7 +29,8 @@ function onLoad() {
 
     function initGallery() {
         // We only want these styles applied when javascript is enabled
-        $('div.navigation').css({'width' : '300px', 'float' : 'left'});
+        // Layout is now handled by CSS (flex). Keep JS from forcing a fixed width.
+        $('div.navigation').css({'width' : '', 'float' : ''});
         $('div.content').css('display', 'block');
 
         // Initially set opacity on thumbs and add additional styling for hover effect on thumbs