From 511e3f8b1abe19a258c19fa319ddffd711fd18ad Mon Sep 17 00:00:00 2001
From: Chigozirim Igweamaka <cgzirim@gmail.com>
Date: Sat, 25 May 2024 14:34:10 +0100
Subject: [PATCH] Improve CarouselSliders' responsivity

---
 client/src/components/CarouselSliders.js      |  4 ++--
 .../styles/CarouselSliders.module.css         | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/CarouselSliders.js b/client/src/components/CarouselSliders.js
index 2afc14a..2f8686e 100644
--- a/client/src/components/CarouselSliders.js
+++ b/client/src/components/CarouselSliders.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import YouTube from "react-youtube";
 import styles from "./styles/CarouselSliders.module.css";
 
 const CarouselSliders = (props) => {
-  const [activeVideoID, setActiveVideoID] = React.useState(null);
+  const [activeVideoID, setActiveVideoID] = useState(null);
   const players = useRef({});
 
   const activeVid = props.matches.length ? props.matches[0].YouTubeID : "";
diff --git a/client/src/components/styles/CarouselSliders.module.css b/client/src/components/styles/CarouselSliders.module.css
index ed91e77..ebfd881 100644
--- a/client/src/components/styles/CarouselSliders.module.css
+++ b/client/src/components/styles/CarouselSliders.module.css
@@ -32,20 +32,34 @@
 .SlideItem {
     height: 100%;
     width: 100%;
-    margin-left: 20px;
    scroll-snap-align: center;
 }
 
+.SlideItem:not(:first-child) {
+    margin-left: 15px;
+}
+
 .SlideItem:nth-child(1) { background-color: rebeccapurple;}
 .SlideItem:nth-child(2) { background-color: dodgerblue;}
 .SlideItem:nth-child(3) { background-color: greenyellow;}
 
+.Iframe {
+    width: 450px;
+    height: 300px;
+}
 
 
-@media (min-width: 768px) {
+@media (max-width: 868px) {
     .Iframe {
-        width: 450px;
-        height: 300px;
+        width: 360px;
+        height: 230px;
+    }
+}
+
+@media (max-width: 690px) {
+    .Iframe {
+        width: 280px;
+        height: 150px;
     }
 }