set min-width for entire page, center cards

HectorVilas · Apr 30, 2023 · 0ee3dc3 · 0ee3dc3
1 parent c8a0dd9
commit 0ee3dc3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/styles/shop.css b/styles/shop.css
@@ -33,7 +33,7 @@
   align-items: center;
   justify-content: center;
   background: linear-gradient(0deg, rgba(31, 96, 74, 0.82), rgba(31, 96, 74, 0.82)), url(../media/images/shop/shop-banner.jpg), #D9D9D9;
-  background-size: cover;
+  background-size: auto 1440px;
   background-position: 50% 60%;
 }
 
@@ -96,9 +96,10 @@
   --card-width: 320px;
   --gap: 32px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
   margin-top: var(--gap);
   gap: var(--gap);
+  justify-items: center;
 }
 
 /* card element */

diff --git a/styles/style.css b/styles/style.css
@@ -16,10 +16,12 @@ body {
   background-color: var(--color-1);
   display: flex;
   justify-content: center;
+  min-width: 400px;
 }
 
 #wrapper {
   width: 100vw;
+  min-width: 400px;
   max-width: 1440px;
   box-shadow: 0 0 50px rgba(0, 0, 0, .25);
 }