adding responsiveness to playNow pg

Riyachauhan11 · Oct 26, 2024 · 7527d4d · 7527d4d
1 parent 6523fda
commit 7527d4d
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/assets/css/playNow.css b/assets/css/playNow.css
@@ -560,3 +560,88 @@ footer {
   /* flex-direction: column; */
   overflow: hidden;
 }
+
+/*responsiveness*/
+/* Responsive adjustments for medium screens (tablets) */
+@media (max-width: 992px) {
+  .genre-section {
+    flex-direction: column;
+  }
+
+  .hero-banner img {
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .genre-content {
+    width: 100%;
+  }
+
+  .genre-title {
+    font-size: 1.8rem;
+  }
+
+  .genre-content span {
+    font-size: 2.5rem;
+  }
+  .book-description {
+    text-align: justify;
+  }
+}
+
+/* Responsive adjustments for small screens (mobile) */
+@media (max-width: 768px) {
+  .genre-section {
+    flex-direction: column;
+  }
+
+  .hero-banner img {
+    width: 100%;
+  }
+
+  .genre-content {
+    width: 100%;
+    padding: 0.5rem;
+  }
+
+  .genre-title {
+    font-size: 1.5rem;
+  }
+
+  .book-author,
+  .book-genre,
+  .book-description {
+    font-size: 1rem;
+  }
+
+  .genre-content span {
+    font-size: 2rem;
+  }
+  .book-description {
+    text-align: justify;
+  }
+}
+
+/* Mobile Styling */
+@media (max-width: 768px) {
+  .footer-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .foot-top {
+    display: block;
+  }
+
+  #quicklinks {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .footer-f p,
+  .footer-f a {
+    font-size: 0.9rem;
+  }
+}