💄 fix : styling issue

dev-madhurendra · Jan 18, 2024 · 1b9ac63 · 1b9ac63
1 parent d322901
commit 1b9ac63
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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%",