fix, mobile에서 깨지는 부분 수정

Team-Crops · Aug 7, 2024 · c5cdd7f · c5cdd7f
1 parent 553a329
commit c5cdd7f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/src/components/atoms/Backdrop.tsx b/src/components/atoms/Backdrop.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const Backdrop = styled.div`
   position: fixed;
-  z-index: 100;
+  z-index: 10000;
   top: 0;
   left: 0;
 

diff --git a/src/components/organisms/main/IntroProjectBlock.tsx b/src/components/organisms/main/IntroProjectBlock.tsx
@@ -18,14 +18,13 @@ const Block = styled.div`
   gap: 80px;
   align-items: center;
 
-  width: 100vw;
+  width: 100%;
   padding: 20px;
 `;
 const CardWrapper = styled.div`
   position: relative;
 
   display: flex;
-  flex-wrap: wrap;
   gap: 32px;
   justify-content: center;
 

diff --git a/src/components/organisms/main/IntroRecommendBlock.tsx b/src/components/organisms/main/IntroRecommendBlock.tsx
@@ -71,7 +71,7 @@ const Block = styled.div`
   gap: 80px;
   align-items: center;
 
-  width: 100vw;
+  width: 100%;
   padding: 20px;
 `;
 

diff --git a/src/components/templates/Header.tsx b/src/components/templates/Header.tsx
@@ -3,6 +3,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { media } from '#/utilities';
 import { HeaderContent } from '#organisms/HeaderContent';
 
 const SpaceCSS = css`
@@ -13,15 +14,21 @@ const StyledHeader = styled.header`
   position: fixed;
   z-index: 9999;
 
+  padding: 0 20px;
+
   background: #fff;
   border-bottom: 1px solid #eee;
 
-  padding: 0 20px;
-
   ${SpaceCSS}
+  ${media.xxlarge} {
+    position: relative;
+  }
 `;
 const HeaderSpace = styled.div`
   ${SpaceCSS}
+  ${media.xxlarge} {
+    display: none;
+  }
 `;
 
 export const Header = () => {

diff --git a/src/components/templates/MainSection3.tsx b/src/components/templates/MainSection3.tsx
@@ -81,7 +81,7 @@ const BackgroundImage = styled(Image)`
   z-index: -10;
   top: -70px;
 
-  width: 100vw;
+  width: 100%;
   height: calc(100vw * ${mainSection3Background.height / mainSection3Background.width});
 `;