trying to resolve padding and multiple elements issue

Signed-off-by: Vamshi Reddy <[email protected]>
layer5io · Aug 11, 2023 · 99ddeb8 · 99ddeb8
1 parent 2bd692f
commit 99ddeb8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js
@@ -35,30 +35,27 @@ export const CardWrapper = styled.div`
 		}
 	}
 
-    .post-thumb-block{
+   .post-thumb-block{
         overflow: hidden;
         height: 11.5rem;
         border-top-right-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
 
-        .gatsby-image-wrapper{
-            height:80%;
-            width:70%;
-            margin: auto;
-            transition: all 0.3s ease-in;
-        }
-        .old-gatsby-image-wrapper{
-            height:100%;
-            width:70%;
-            margin: auto;
-            transition: all 0.3s ease-in;
-        }
-         img{
-            padding: 10px;
-            width: 100%;
-            height: 100%;
+    .gatsby-image-wrapper, .old-gatsby-image-wrapper{
+        height:100%;
+        margin-top: 0.2rem;
+        transition: all 0.3s ease-in;
+    }
+    img{
+        height: inherit;
+        max-height: 180px;
+        display: block;
+        text-align: center;
+        margin: auto;
         }
+
     }
+    
 
     .post-content-block{
         padding: 1rem 2rem;

diff --git a/src/sections/Company/News-grid/NewsGrid.style.js b/src/sections/Company/News-grid/NewsGrid.style.js
@@ -51,6 +51,30 @@ export const NewsPageWrapper = styled.div`
     .search-box-container {
         width: 35%;
     }
+    .post-thumb-block{
+        overflow: hidden;
+        height: 11.5rem;
+        border-top-right-radius: 0.5rem;
+        border-top-left-radius: 0.5rem;
+
+        .gatsby-image-wrapper{
+            height: 100%;
+            width: 80%;
+            margin: auto;
+            transition: all 0.3s ease-in;
+        }
+        .old-gatsby-image-wrapper{
+            height:100%;
+            width:80%;
+            margin: auto;
+            transition: all 0.3s ease-in;
+        }
+         img{
+            padding: 4px;
+            width: 100%;
+            height: 100%;
+        }
+    }
     
     .post-content-block {
         height: 10rem;