Fix responsiveness

christianjtr · Apr 2, 2024 · 44386c0 · 44386c0
1 parent 01bcc5f
commit 44386c0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/app/src/layout/SliderImage/SliderImage.css b/app/src/layout/SliderImage/SliderImage.css
@@ -1,12 +1,14 @@
 .overlay img {
     position: relative;
     width: 100%;
+    -webkit-mask-image: linear-gradient(black 80%, transparent);
+    mask-image: linear-gradient(black 80%, transparent);
 }
 
 .overlay .title--centered {
     position: absolute;
     top: 40%;
-    right: 80px;
+    right: 5%;
     transform: translate(-50%, -50%);
     -webkit-text-stroke: 0.5px floralwhite;
     background-color: rgba(173, 173, 173, 0.05);
@@ -22,3 +24,17 @@
     top: 0;
     left: 0;
 }
+
+@media screen and (max-width: 768px) {
+    .overlay .title--centered {
+        top: 65%;
+        right: 7%;
+    }
+}
+
+@media screen and (min-width: 320px) and (max-width: 425px) {
+    .overlay .title--centered {
+        top: 70%;
+        right: 10%;
+    }
+}
diff --git a/app/src/layout/SliderImage/SliderImage.tsx b/app/src/layout/SliderImage/SliderImage.tsx
@@ -37,7 +37,7 @@ const SliderImage: React.FC<SliderImageProps> = (props: SliderImageProps): React
 
     return (
         <div className="glide">
-            <div className={`glide__track h-96 ${hasOverlay && 'overlay'}`} data-glide-el="track">
+            <div className={`glide__track h-60 md:h-96 ${hasOverlay && 'overlay'}`} data-glide-el="track">
                 <ul className="glide__slides">
                     {imageSources.map((item, key) => (
                         <li className="glide__slide relative" key={`image_item_${key}`}>