Merge pull request #119 from LikelionUniv/design/hackathon-partbtnCSS…

…-fix Design/hackathon partbtn css fix
LikelionUniv · Jul 9, 2024 · a155bf4 · a155bf4
2 parents bac2c25 + 5b2ddf2
commit a155bf4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 15 deletions.
diff --git a/src/pages/landing/components/hackathon/Detail.tsx b/src/pages/landing/components/hackathon/Detail.tsx
@@ -102,8 +102,7 @@ const MoreBtn = styled.div`
     line-height: 150%; /* 30px */
 
     @media (max-width: 767px) {
-        /* width: clamp(360px, 3vw, 523px); */
-        width: 320px;
+        width: clamp(290px, 3vw, 523px);
         height: 48px;
         font-size: 16px;
     }

diff --git a/src/pages/landing/components/hackathon/HackathonPart.tsx b/src/pages/landing/components/hackathon/HackathonPart.tsx
@@ -45,12 +45,9 @@ const PartButton = styled.div`
     font-size: 28px;
     font-style: normal;
 
-    width: 580px;
+    width: clamp(520px, 2vw, 580px);
     height: auto;
 
-    margin-top: 120px;
-    margin-bottom: 148px;
-
     cursor: pointer;
 
     &:hover {
@@ -61,22 +58,27 @@ const PartButton = styled.div`
         width: 520px;
         height: 64px;
         font-size: 20px;
-        margin-top: 40px;
-        margin-bottom: clamp(255px, 2vh, 446px);
-        width: 300px;
     }
 
     @media (max-width: 360px) {
         width: 282px;
         height: 48px;
         font-size: 16px;
-        margin-top: 36px;
-        margin-bottom: 255px;
+    }
+    @media (max-width: 390px) {
+        width: 282px;
+        height: 48px;
+        font-size: 16px;
+    }
+    @media (max-width: 430px) {
+        width: 282px;
+        height: 48px;
+        font-size: 16px;
     }
 `;
 
 const Info = styled.div`
-    margin: 21px 0px 20px 40px;
+    margin: 20px 0px 20px 40px;
     font-weight: bold;
 `;
 

diff --git a/src/pages/landing/components/hackathon/HackathonSponsor.tsx b/src/pages/landing/components/hackathon/HackathonSponsor.tsx
@@ -14,6 +14,7 @@ import logo9 from '../../../../img/landing/sponsor/logo9.svg';
 import logo10 from '../../../../img/landing/sponsor/logo10.svg';
 import logo11 from '../../../../img/landing/sponsor/logo11.svg';
 import logo12 from '../../../../img/landing/sponsor/logo12.svg';
+import { styled } from 'styled-components';
 
 const SponsorInfo = () => {
     SwiperCore.use([Autoplay]);
@@ -74,6 +75,7 @@ type serviceType = {
     url: string;
     backgroundColor?: string;
 };
+
 const serviceList: serviceType[] = [
     {
         id: 0,

diff --git a/src/pages/landing/components/hackathon/HackathonTimer.tsx b/src/pages/landing/components/hackathon/HackathonTimer.tsx
@@ -87,7 +87,6 @@ const TimerContainer = styled.div`
     border-radius: 24px;
     height: 240px;
     max-width: 1200px;
-    width: 100%;
     margin-left: 10px;
     margin-right: 10px;
 

diff --git a/src/pages/landing/components/hackathon/MainInfo.tsx b/src/pages/landing/components/hackathon/MainInfo.tsx
@@ -16,7 +16,9 @@ const MainInfo = () => {
             <FirstWrapper>
                 <Container>
                     <TitleImg src={title} />
-                    <HackathonPart />
+                    <Participation>
+                        <HackathonPart />
+                    </Participation>
                 </Container>
             </FirstWrapper>
             <LineWrapper>
@@ -127,6 +129,24 @@ const Container = styled.div`
     }
 `;
 
+const Participation = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: 120px;
+    margin-bottom: 148px;
+    width: 100%;
+
+    @media (max-width: 767px) {
+        margin-top: 40px;
+        margin-bottom: clamp(255px, 2vh, 446px);
+    }
+
+    @media (max-width: 360px) {
+        margin-top: 36px;
+        margin-bottom: 255px;
+    }
+`;
+
 const TitleImg = styled.img`
     margin-top: 302px;
     width: clamp(520px, 5wv, 926px);

diff --git a/src/pages/landing/components/hackathon/More.tsx b/src/pages/landing/components/hackathon/More.tsx
@@ -116,7 +116,7 @@ const MoreBtn = styled.div`
     line-height: 150%; /* 30px */
 
     @media (max-width: 767px) {
-        width: clamp(320px, 2vw, 523px);
+        width: clamp(290px, 2vw, 523px);
         height: 48px;
         font-size: 16px;
     }