hax/seek-tune
1
0
Fork 0
mirror of https://github.com/cgzirim/seek-tune.git synced 2025-12-18 09:24:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve CarouselSliders' responsivity

Browse source
This commit is contained in:
Chigozirim Igweamaka 2024-05-25 14:34:10 +01:00
parent a8eab97b33
commit 511e3f8b1a
2 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/CarouselSliders.js
View file

@ -1,9 +1,9 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef, useState } from "react";
import YouTube from "react-youtube"; import YouTube from "react-youtube";
import styles from "./styles/CarouselSliders.module.css"; import styles from "./styles/CarouselSliders.module.css";
const CarouselSliders = (props) => { const CarouselSliders = (props) => {
const [activeVideoID, setActiveVideoID] = React.useState(null); const [activeVideoID, setActiveVideoID] = useState(null);
const players = useRef({}); const players = useRef({});
const activeVid = props.matches.length ? props.matches[0].YouTubeID : ""; const activeVid = props.matches.length ? props.matches[0].YouTubeID : "";

24
client/src/components/styles/CarouselSliders.module.css
View file

@ -32,20 +32,34 @@
.SlideItem { .SlideItem {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: 20px;
scroll-snap-align: center; scroll-snap-align: center;
} }
.SlideItem:not(:first-child) {
margin-left: 15px;
}
.SlideItem:nth-child(1) { background-color: rebeccapurple;} .SlideItem:nth-child(1) { background-color: rebeccapurple;}
.SlideItem:nth-child(2) { background-color: dodgerblue;} .SlideItem:nth-child(2) { background-color: dodgerblue;}
.SlideItem:nth-child(3) { background-color: greenyellow;} .SlideItem:nth-child(3) { background-color: greenyellow;}
.Iframe {
@media (min-width: 768px) {
.Iframe {
width: 450px; width: 450px;
height: 300px; height: 300px;
}
@media (max-width: 868px) {
.Iframe {
width: 360px;
height: 230px;
}
}
@media (max-width: 690px) {
.Iframe {
width: 280px;
height: 150px;
} }
} }