diff --git a/src/site/pug/includes/timeline_page.pug b/src/site/pug/includes/timeline_page.pug
index 912dfd5..ea96bfe 100644
--- a/src/site/pug/includes/timeline_page.pug
+++ b/src/site/pug/includes/timeline_page.pug
@@ -7,7 +7,7 @@ mixin timeline_page(page, pageIndex)
 			header.page-number(id=`page-${pageNumber}`)
 				span.number Page #{pageNumber}
 
-		.timeline-inner
+		.timeline-inner(class=`${settings.timeline_columns}-columns`)
 			- const suggestedSize = 260 //- from css :(
 			each image in page
 				- const thumbnail = image.getSuggestedThumbnailP(suggestedSize) //- use this as the src in case there are problems with srcset
diff --git a/src/site/pug/settings.pug b/src/site/pug/settings.pug
index ce879a0..2e71808 100644
--- a/src/site/pug/settings.pug
+++ b/src/site/pug/settings.pug
@@ -76,11 +76,11 @@ html
 
 					+checkbox("display_top_nav", "Display top bar", "Always", false)
 
-					+select("timeline_columns", "Timeline columns", true, [
+					+select("timeline_columns", "Timeline columns", false, [
 						{value: "dynamic", text: "Dynamic"},
-						{value: "3", text: "3 columns"},
-						{value: "4", text: "4 columns"},
-						{value: "6", text: "6 columns"}
+						{value: "three", text: "3 columns"},
+						{value: "four", text: "4 columns"},
+						{value: "six", text: "6 columns"}
 					])
 
 					+select("caption_side", "Caption side", false, [
diff --git a/src/site/sass/includes/_main.sass b/src/site/sass/includes/_main.sass
index 5973e2e..1a8b8d1 100644
--- a/src/site/sass/includes/_main.sass
+++ b/src/site/sass/includes/_main.sass
@@ -217,6 +217,18 @@ body
 		flex-wrap: wrap
 		margin: 0 auto
 
+		&.three-columns
+			max-width: 810px
+
+			@media screen and (max-width: $layout-a-max)
+				max-width: 480px
+
+		&.four-columns
+			max-width: 1080px
+
+		&.six-columns
+			max-width: 1620px
+
 		@media screen and (max-width: $layout-c-max)
 			display: grid
 			grid-template-columns: repeat(3, 1fr)