Adjust game card width for mobile devices

FinemechanicPub · Aug 9, 2024 · e140759 · e140759
1 parent 75b9d66
commit e140759
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/frontend/src/components/GameCarousel.vue b/frontend/src/components/GameCarousel.vue
@@ -32,7 +32,7 @@
     padding: 20px 0; /* Added padding to prevent shadow cutoff */
   }
   .card {
-    flex: 0 0 300px;
+    flex: 0 0 270px;
     height: 400px;
     background-color: white;
     border-radius: 10px;
@@ -96,7 +96,7 @@
 </style>
 <template>
     <div class="carousel-container">
-        <div class="carousel" :style="{ transform: `translateX(${-currentIndex * 320}px)` }">
+        <div class="carousel" :style="{ transform: `translateX(${-currentIndex * 290}px)` }">
             <div v-for="game in games" :key="game.id" class="card">
                 <h2>{{ game.title }}</h2>
                 <p></p>