Merge pull request #86 from Anamika-garg/responsive-issue

Issue #85 fixed : Cards Responsive issue
samyakmaitre · Oct 6, 2024 · 7cae986 · 7cae986
2 parents 98c49bf + 50852d9
commit 7cae986
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/assets/styles/Movie.css b/src/assets/styles/Movie.css
@@ -2,7 +2,7 @@
     border: 1px solid #ccc;
     border-radius: 10px;
     overflow: hidden;
-    width: 200px;
+    width: 350px;
     text-align: center;
     margin: 10px;
     font-family: Arial, sans-serif;

diff --git a/src/assets/styles/MovieList.css b/src/assets/styles/MovieList.css
@@ -5,15 +5,16 @@
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     gap: 10px;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-inline: auto;
+    position: relative;
     padding: 10px;
+    flex-wrap: wrap;
   }
 
   .movie-list::-webkit-scrollbar {
     display: none; /* Hide scrollbar for better UX */
   }
-
-  .movie-list > div {
-    flex: 0 0 calc(20% - 10px); /* 20% width minus the gap between items */
-    scroll-snap-align: start;
-  }