From 684ac465c83ac90135f0313d3e49a30eccdda795 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 27 Mar 2021 21:33:51 -0700
Subject: [PATCH] Set card column width to 320px or screen width, whichever is
 smaller

The inner min function prevents column width overflow for devices with a width smaller than 320px
---
 script.js | 2 +-
 style.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 55a245b..dc9fca0 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,5 @@
 const main = document.getElementsByTagName("main")[0];
-const initialColumns = Math.max(1, Math.floor(main.clientWidth / 360) - 1);
+const initialColumns = Math.max(1, Math.floor(main.clientWidth / 320) - 1);
 
 /* Generic element builders */
 const createColumnElement = () => {
diff --git a/style.css b/style.css
index 7191b6e..af91a55 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,7 @@ header {
 
 main {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
   grid-gap: 1rem;
   justify-items: center;
   margin: 0 auto;
-- 
2.47.3