home: improve sizings for cards for smaller screens (3)

paulolieuthier · Dec 5, 2021 · dc26622 · dc26622
1 parent bd8f865
commit dc26622
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/theme/dist/index.css b/theme/dist/index.css
diff --git a/theme/dist/index.css.map b/theme/dist/index.css.map
diff --git a/theme/src/components/Home.vue b/theme/src/components/Home.vue
@@ -412,7 +412,8 @@ Section#sermon-series
 
     @media (max-width: 740px)
         #cards
-            grid-template-columns repeat(auto-fit, minmax(@css{min(100%, 150px)}, 1fr))
+            grid-template-columns repeat(auto-fit, minmax(@css{min(100%, 140px)}, 1fr))
+            grid-gap 30px
 
 Section#groups
     #cards

diff --git a/theme/src/components/sermons/Series.vue b/theme/src/components/sermons/Series.vue
@@ -105,4 +105,9 @@ Section#content
             left 0
             position absolute
             width 100%
+
+    @media (max-width: 740px)
+        #cards
+            grid-template-columns repeat(auto-fit, minmax(@css{min(100%, 140px)}, 1fr))
+            grid-gap 30px
 </style>