removes blur on mobile

elijames-codecov · Aug 2, 2024 · eb42eb4 · eb42eb4
1 parent d7b17d2
commit eb42eb4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -52,6 +52,7 @@ const Carousel = ({companies}) => {
     maxScrollWidth.current = carousel.current
       ? carousel.current.scrollWidth - movement
       : 0;
+    console.log(window.outerWidth)
   }, []);
 
   return (
@@ -90,7 +91,7 @@ const Carousel = ({companies}) => {
           </a>
         </div>
       </div>
-      <div className="relative container-spill xl:pl-[3rem] carousel-wrapper carousel-wrapper-right">
+      <div className="relative container-spill xl:pl-[3rem] carousel-wrapper lg:carousel-wrapper-right">
         <div
           ref={carousel}
           className="carousel-container no-scrollbar overflow-auto touch-pan-x relative flex gap-[1rem] scroll-smooth snap-x snap-mandatory z-0"

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -266,6 +266,23 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   .text-balance {
     white-space: balance;
   }
+  @responsive {
+	  .carousel-wrapper-right::after {
+		  z-index: 1;
+		  content: '';
+		  position: absolute;
+		  top: 0;
+		  right: 0;
+		  width: 8rem;
+		  bottom: 0;
+		  flex-shrink: 0;
+		  background: linear-gradient(
+			  270deg,
+			  #F2F0ED 7.69%,
+			  rgba(31, 22, 51, 0) 92.31%
+		  );
+	  }
+  }
   .carousel-wrapper-left::before {
 	  z-index: 1;
 	  content: '';
@@ -281,19 +298,4 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
 		  rgba(31, 22, 51, 0) 92.31%
 	  );
   }
-  .carousel-wrapper-right::after {
-	  z-index: 1;
-	  content: '';
-	  position: absolute;
-	  top: 0;
-	  right: 0;
-	  width: 8rem;
-	  bottom: 0;
-	  flex-shrink: 0;
-	  background: linear-gradient(
-		  270deg,
-		  #F2F0ED 7.69%,
-		  rgba(31, 22, 51, 0) 92.31%
-	  );
-  }
 </style>