Improved mobile layout.

mrdoob · Sep 13, 2021 · 323da62 · 323da62
1 parent a7562fb
commit 323da62
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/server/assets/gallery.html b/server/assets/gallery.html
@@ -60,8 +60,8 @@
 				border: none;
 			}
 			#gallery img {
-				width: 200px;
-				height: 100px;
+				width: 100%;
+				aspect-ratio: 2 / 1;
 				background-color: #222;
 				border: 1px solid #222;
 				border-radius: 4px;
@@ -70,9 +70,9 @@
 				border: 1px solid #FFF;
 			}
 			.effect {
+				width: 200px;
 				display: inline-block;
 				margin-right: 4px;
-				margin-bottom: 4px;
 			}
 			form {
 				margin-bottom: 2em;
@@ -95,6 +95,25 @@
 			input[type=submit]:hover {
 				color: #009DE9;
 			}
+
+			@media all and ( max-width: 530px ) {
+				body {
+					padding: 40px 20px;
+				}
+				.effect {
+					width: 48%;
+				}
+			}
+
+			@media all and ( max-width: 370px ) {
+				body {
+					padding: 40px 10px;
+				}
+				.effect {
+					width: 100%;
+				}
+			}
+
 		</style>
 		<script>function $(id,m){document.getElementById(id).style.display= m?'block':'none';}</script>
 	</head>