responsiveness

Signed-off-by: Yash Kamboj <[email protected]>
layer5io · Jun 9, 2022 · 4545efe · 4545efe
1 parent 577efa0
commit 4545efe
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/sections/Projects/Project-grid/index.js b/src/sections/Projects/Project-grid/index.js
@@ -6,7 +6,7 @@ import PageHeader from "../../../reusecore/PageHeader";
 import { ProjectWrapper } from "./projectGrid.style";
 import DockerExtensionCTA from "../../Docker-Meshery/docker-extension-CTA";
 
-import extension from "../../../assets/images/docker-extension/Docker_animated.svg"
+import extension from "../../../assets/images/docker-extension/Docker_animated.svg";
 import meshery from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg";
 import landscape from "../../../assets/images/landscape/layer5_landscape_green.svg";
 import imagehub from "../../../assets/images/image-hub/layer5-image-hub.svg";
@@ -80,15 +80,11 @@ const ProjectPage = () => {
             >
               <div className="project__card-container-seven">
                 <Row>
-                  <Col lg={4} md={12} sm={12} className="image">
-                    <img
-                      src={extension}
-                      alt="Meshery Docker Extension"
-                    />
-                  </Col>
-                  <Col lg={8} md={12} sm={12}>
-                    <h5> Meshery Docker Extension </h5>
-                  </Col>
+                  <img
+                    src={extension}
+                    alt="Meshery Docker Extension"
+                  />
+                  <h5> Meshery Docker Extension </h5>
                 </Row>
               </div>
             </Link>

diff --git a/src/sections/Projects/Project-grid/projectGrid.style.js b/src/sections/Projects/Project-grid/projectGrid.style.js
@@ -185,16 +185,19 @@ export const ProjectWrapper = styled.div`
             width: 150px;
             align-self: center;
             margin-top: 8px;
+        margin: auto;
+
             @media only screen and (min-width: 780px) {
                 align-self: flex-start;
+            margin-top: 15px;
+
+                
             } 
         }
         h5{
             align-self: center;
-            margin-top: 1rem;
             @media only screen and (min-width: 780px) {
-                align-self: flex-end;
-                padding-top:  40px;
+                padding-top:  0px;
             }
         }
     }
@@ -206,10 +209,14 @@ export const ProjectWrapper = styled.div`
         flex-direction: column;
         justify-content: space-between;
         img{
+            align-self: center;
+
             max-width: 200%;
             max-height: 100%;
+
         }
         h5{
+            top: 0;
             font-weight: 600;
             text-align: center;
             
@@ -235,7 +242,6 @@ export const ProjectWrapper = styled.div`
             align-self: center;
             margin-top: 1rem;
             @media only screen and (min-width: 780px) {
-                align-self: flex-end;
             }
         }
     }
@@ -363,6 +369,15 @@ export const ProjectWrapper = styled.div`
             }
         }
         .project__card.seven{
+            img{
+                margin-top: 15px;
+                width: 150%;
+            }
+            h5{ 
+                margin-top:30px;
+            }
+        }
+        .project__card.eight{
             img{
                 margin-top: 10px;
             }