From 1b9ac63d0decd1092aa5459eb0831debb0cabdb3 Mon Sep 17 00:00:00 2001
From: madhuredra <madhuredra.tiwari@zemosolabs.com>
Date: Thu, 18 Jan 2024 12:24:25 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix=20:=20styling=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organisms/ProjectCard/index.tsx           |  2 --
 frontend/src/pages/Project/index.tsx          |  3 ++-
 frontend/src/utils/styled.ts                  | 26 ++++++++++++-------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/organisms/ProjectCard/index.tsx b/frontend/src/components/organisms/ProjectCard/index.tsx
index f7699453..d452c6bc 100644
--- a/frontend/src/components/organisms/ProjectCard/index.tsx
+++ b/frontend/src/components/organisms/ProjectCard/index.tsx
@@ -19,8 +19,6 @@ const ProjectCard = (props: IProjectCardProps) => {
           <img
             src={props.projects.projectImage ? props.projects.projectImage : getRandomImage(PROJECT_IMAGE)}
             alt={`${PROJECT_ALT} ${props.projects.title}`}
-            width={500}
-            height={500}
           />
         </ImageContainer>
       </StyledProjectImageDiv>
diff --git a/frontend/src/pages/Project/index.tsx b/frontend/src/pages/Project/index.tsx
index 95d5a0f2..b5a079a9 100644
--- a/frontend/src/pages/Project/index.tsx
+++ b/frontend/src/pages/Project/index.tsx
@@ -31,12 +31,13 @@ const Project = () => {
             ...prevState,
             endIndex: projectPerPage.tablet,
         }));
-        setStepBy(2);
+        setStepBy(1);
     } else {
         setPageState((prevState) => ({
             ...prevState,
             endIndex: projectPerPage.mobile,
         }));
+        setStepBy(1);
     }
 
     getProjects()
diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts
index 4c68bdee..44bdfdaf 100644
--- a/frontend/src/utils/styled.ts
+++ b/frontend/src/utils/styled.ts
@@ -125,7 +125,7 @@ export const HomeDiv = styled('div')<{ id: string }>({
       justifyContent: "center",
       width: "100%",
       marginLeft: "0vw",
-      marginTop:"30%"
+      marginTop:"10%"
     },
     '@media (max-width:1024px)': {
       justifyContent: "center",
@@ -657,13 +657,16 @@ export const StyledProjectContainer = styled('div')({
   padding: "0 1.25rem 1.25rem 1.25rem",
   width: "25rem",
   borderRadius: "0.625rem",
-  height: "100%",
+  '@media (max-width: 468px)': {
+    width: "90vw",
+    justifyContent: "center",
+  },
 })
 export const StyledProjectImageDiv = styled('div')({
   '& img': {
-    width: "25rem",
-    height: "25rem",
-    objectFit:"cover"
+    width: "100%",
+    height: "50%",
+    objectFit:"contain"
   },
 })
 export const StyledProjectInfoDiv = styled('div')({
@@ -807,6 +810,7 @@ export const StyledExperienceSection = styled("div")({
   marginTop:"100px",
   '@media(max-width:468px)':{
     height: "100%",
+    marginTop:"0px",
   },
 });
 
@@ -819,7 +823,7 @@ export const ExperienceFirstContainer = styled("div")({
   width: "100vw",
   marginLeft: "200px",
   '@media(max-width:468px)':{
-    marginTop:"100px"
+    marginTop:"0px"
   },
 });
 
@@ -912,7 +916,7 @@ export const LeftColumn = styled.div`
 
 export const ImageContainer = styled.div`
   img {
-    border-radius: 20px;
+    padding-top:10px;
     transition: transform 0.3s ease-in-out;
     width:100%;
     &:hover {
@@ -1052,8 +1056,12 @@ export const StyledContactMeSection = styled('div')({
     },
 })
 export const ExperienceMuiButton = styled(MuiButton)({
-    fontSize: "15px",
-    padding:"10px"
+  fontSize: "15px",
+  padding: "10px",
+  "@media (max-width: 468px)": {
+    width: "90vw",
+    marginLeft: "5%",
+  },
 })
 export const ContactContainer = styled('div')<{id: string}>({
   height: "100%",