Improve the Carousel Images and texts

ZaiusDR · Mar 16, 2021 · b7beadf · b7beadf
1 parent f2b2142
commit b7beadf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/open-social-frontend/src/components/HeaderCarousel.js b/open-social-frontend/src/components/HeaderCarousel.js
@@ -22,8 +22,10 @@ function HeaderCarousel() {
           </span>
         </p>
         <StaticImage
+          className="Carousel-img-wrapper"
           alt={'collaboration'}
           src={'../images/collaboration.jpg'}
+          placeholder="blurred"
         />
       </div>
       <div>
@@ -38,8 +40,10 @@ function HeaderCarousel() {
             </span>
         </p>
         <StaticImage
+          className="Carousel-img-wrapper"
           alt={'open-source'}
           src={'../images/open-source.jpg'}
+          placeholder="blurred"
         />
       </div>
       <div>
@@ -54,8 +58,10 @@ function HeaderCarousel() {
             </span>
         </p>
         <StaticImage
+          className="Carousel-img-wrapper"
           alt={'community'}
           src={'../images/community.jpg'}
+          placeholder="blurred"
         />
       </div>
     </Carousel>

diff --git a/open-social-frontend/src/styles/HeaderCarousel.css b/open-social-frontend/src/styles/HeaderCarousel.css
@@ -1,6 +1,10 @@
 .Header-carousel {
     margin-top: 64px;
     width: 100%;
+    height: auto;
+}
+
+.Carousel-img-wrapper {
     height: 35vw;
 }
 
@@ -9,15 +13,15 @@
     font-weight: bold;
     position: absolute;
     z-index: 2;
-    top: 50%;
+    top: 18vw;
     left: 0;
 }
 
 .Image-subtext {
     font-size: 1.3vw;
     font-weight: bold;
     position: absolute;
-    top: 60%;
+    top: 23vw;
     left: 0;
     z-index: 2;
 }
@@ -30,17 +34,17 @@
 
 
 @media only screen and (max-width: 600px) {
-    .Header-carousel {
-        height: 70vh;
-        max-height: 70vw;
+    .Carousel-img-wrapper {
+        height: 70vw;
     }
 
     .Image-text {
+        top: 35vw;
         font-size: 6vw;
     }
 
     .Image-subtext {
         font-size: 3vw;
-        top: 70%;
+        top: 49vw;
     }
 }