some mobile view optimizations

bjesus · Dec 1, 2024 · 9fe5175 · 9fe5175
1 parent d96b83a
commit 9fe5175
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/components/BooksList.vue b/components/BooksList.vue
@@ -20,6 +20,7 @@ ul {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap: 1rem;
+  justify-items: center;
 }
 
 button {

diff --git a/components/Header.vue b/components/Header.vue
@@ -54,7 +54,7 @@ header {
   grid-area: 1 / 1 / 2 / 2;
   display: grid;
   grid-template-columns: auto auto;
-  grid-template-rows: 1fr 1fr auto;
+  grid-template-rows: 1fr auto;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   grid-template-areas:
@@ -63,7 +63,7 @@ header {
 
   @media (min-width: 600px) {
     grid-template-columns: 1fr 45rem 1fr;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: 1fr;
     grid-template-areas: "logo search options";
   }
 
@@ -76,6 +76,12 @@ header {
     svg {
       margin-left: 1rem;
       cursor: pointer;
+      width: 1rem;
+      height: 1rem;
+      @media (min-width: 600px) {
+        width: auto;
+        height: auto;
+      }
     }
 
     button {