Increase gallery columns on larger screens

farhana039 · farhana039 · commit 27570a6c6fcc · 2024-07-28T16:27:47.000Z
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -280,12 +280,21 @@ main {
     }
 }
 
+/* Gallery */
+#photos {
+    column-count: 3;
+}
+
 /* Larger devices (laptops and desktops, 992px and up) */
 @media screen and (min-width: 992px) {
     #menu a:hover{
         border-bottom: 1px solid #3a3a3a;
     }
     
+    /* Gallery */
+    #photos {
+        column-count: 4;
+    }
 }
 
 @media screen and (min-width: 1200px) {

Original file line number	Diff line number	Diff line change
`@@ -280,12 +280,21 @@ main {`
`280`	`280`	`}`
`281`	`281`	`}`
`282`	`282`
	`283`	`+/* Gallery */`
	`284`	`+#photos {`
	`285`	`+ column-count: 3;`
	`286`	`+}`
	`287`	`+`
`283`	`288`	`/* Larger devices (laptops and desktops, 992px and up) */`
`284`	`289`	`@media screen and (min-width: 992px) {`
`285`	`290`	`#menu a:hover{`
`286`	`291`	`border-bottom: 1px solid #3a3a3a;`
`287`	`292`	`}`
`288`	`293`
	`294`	`+ /* Gallery */`
	`295`	`+ #photos {`
	`296`	`+ column-count: 4;`
	`297`	`+ }`
`289`	`298`	`}`
`290`	`299`
`291`	`300`	`@media screen and (min-width: 1200px) {`