CardList

components/haditha/CardList.vue

@@ -41,7 +41,9 @@ const goToLibraryShow = (item) => {
       />
     </div>
 
-    <div class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
+    <div
+      class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-5 md:gap-x-28 md:gap-y-12 mx-6"
+    >
       <UCard
         v-if="props.list.length"
         v-for="(item, index) in props.list"
@@ -110,6 +112,7 @@ const goToLibraryShow = (item) => {
   margin: 0 1em;
   margin-right: auto;
   margin-left: auto;
+  height: 100%;
 
   .page-header {
     margin-bottom: 2em;
@@ -130,6 +133,7 @@ const goToLibraryShow = (item) => {
     /* padding: 1em 1.3em; */
     height: calc(100dvh - 13.5em);
     overflow-y: auto;
+    /* margin: 0 24px; */
 
     .library-list-item {
       width: 140;
@@ -166,5 +170,18 @@ const goToLibraryShow = (item) => {
     letter-spacing: 0%;
     text-align: center;
   }
+  @media screen and (max-width: 719.99px) {
+    .library-list-contianer {
+    }
+    .library-list {
+      height: calc(100dvh - 8em);
+    }
+
+    .page-header {
+      margin-top: 4em;
+      margin-right: 2em;
+      margin-bottom: 1em;
+    }
+  }
 }
 </style>

pages/haditha/library/index.vue

@@ -179,4 +179,10 @@ const CardList = defineAsyncComponent(() =>
   padding-top: 8.3em;
   background: #f7fffd;
 }
+
+@media screen and (max-width: 719.99px) {
+  .search-box-container {
+  padding-top: 0em;
+}
+}
 </style>