style: responsive Browse page

src/components/MovieCarausel.js

@@ -4,7 +4,9 @@ import MovieCard from "./MovieCard";
 const MovieCarousel = ({ title, movies }) => {
   return (
     <div>
-      <h1 className="ml-12 text-white font-bold text-2xl rounded">{title}</h1>
+      <h1 className="ml-6 lg:ml-12 text-white font-bold text-md sm:text-lg md:text-xl lg:text-2xl rounded">
+        {title}
+      </h1>
       <div className="slider">
         <div className="slide flex mt-2 mb-14">
           {movies?.map((movie) => (

src/components/MovieCard.js

@@ -7,7 +7,7 @@ const MovieCard = ({ posterPath, id }) => {
 
   return (
     <Link to={`/browse/watch/${id}`}>
-      <div className="w-[10rem] mx-2 transform transition-transform duration-500 ease-in-out hover:scale-90">
+      <div className="w-[6rem] sm:w[8rem] md:w-[9rem] lg:w-[10rem] mx-2 transform transition-transform duration-500 ease-in-out hover:scale-90">
         <img
           alt="Poster"
           src={poster_CDN_URL + posterPath}

src/components/MovieInfo.js

@@ -10,21 +10,31 @@ const MovieInfo = ({ title, overview, id }) => {
   };
 
   return (
-    <div className="w-1/3 ml-10 mt-[11%] absolute font-bold z-10">
-      <h1 className="font-bold text-5xl m-3 text-white">{title}</h1>
-      <p className="text-lg text-justify m-3 text-white">{overview}</p>
+    <div className="ml-2 lg:ml-10 mt-[19%] sm:mt-[16%] md:mt-[15%] lg:mt-[11%] absolute z-10">
+      <h1 className="font-bold text-lg sm:text-2xl md:text-4xl lg:text-5xl m-3 text-white">
+        {title}
+      </h1>
+      <p className="text-[7px] sm:text-[12px] md:text-[14px] lg:text-lg w-[50%] lg:w-[35%] text-justify m-3 text-white">
+        {overview}
+      </p>
       <Link to={`/browse/watch/${id}`}>
-        <button className="bg-white w-32 p-3 mx-3 my-4 font-bold rounded text-lg">
-          <FontAwesomeIcon icon={faPlay} className="mr-3 text-[1.5rem]" />
+        <button className="bg-white w-[3rem] sm:w-[5rem] md:w-[7rem] lg:w-32 p-1 md:p-2 lg:p-3 mx-3 my-0 lg:my-4 font-bold rounded text-xs sm:text-md md:text-lg lg:text-lg">
+          <FontAwesomeIcon
+            icon={faPlay}
+            className="mr-1 sm:mr-2 md:mr-2 lg:mr-3 text-xs sm:text-md md:text-lg lg:text-xl"
+          />
           Play
         </button>
       </Link>
       <button
-        className="bg-zinc-600 w-[10rem] p-3 my-4 font-bold text-white rounded text-lg bg-opacity-70"
+        className="bg-zinc-600 w-[5rem] sm:w-[5rem] md:w-[8rem] lg:w-32 p-1 md:p-2 lg:p-3 my-0 sm:my-2 md:my-2 lg:my-4 font-bold text-white rounded text-xs sm:text-md md:text-lg lg:text-lg bg-opacity-70"
         onClick={handleScrollToMore}
       >
         See More
-        <FontAwesomeIcon icon={faAngleDown} className="pl-2 text-[1.5rem]" />
+        <FontAwesomeIcon
+          icon={faAngleDown}
+          className="pl-1 text-xs sm:text-md md:text-lg lg:text-xl"
+        />
       </button>
     </div>
   );

src/components/MovieTrailer.js

@@ -6,13 +6,14 @@ const MovieTrailer = ({ id }) => {
   useMovieTrailer(id);
 
   return (
-    <div>
+    <div className="pt-10 lg:pt-0">
       <iframe
         className="w-full aspect-video"
         src={
           "https://www.youtube.com/embed/" +
           movieTrailer?.key +
-          "?rel=0&autoplay=1&mute=1"
+          "?rel=0&autoplay=1&mute=1&loop=1&playlist=" +
+          movieTrailer?.key
         }
         title="YouTube video player"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"

src/components/SecondaryContainer.js

@@ -6,7 +6,7 @@ const SecondaryContainer = () => {
   const moviesData = useSelector((store) => store.movies);
 
   return (
-    <div className="bg-black -mt-[13rem] w-full">
+    <div className="bg-black pt-5] lg:pt-0 lg:-mt-[13rem] w-full">
       <MovieCarausel
         title={"Now Playing"}
         movies={moviesData.nowPlayingMovies}