[#48] 마이페이지 반응형작업 완료 (1024,768,414,375)

bithumbNFT · Oct 9, 2021 · 8b2ebd9 · 8b2ebd9
1 parent 2cd313d
commit 8b2ebd9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/components/MyPage/LikeImage/index.js b/src/components/MyPage/LikeImage/index.js
@@ -41,6 +41,9 @@ const MyUploadText = styled.div`
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #ffd0ae 50%);
   width: fit-content;
   margin: 8px 0;
+  @media (max-width: 414px) {
+    font-size: 1rem;
+  }
 `;
 
 export const EmptyWrap = styled.section`

diff --git a/src/components/MyPage/MyUpload/index.js b/src/components/MyPage/MyUpload/index.js
@@ -52,6 +52,9 @@ const MyUploadText = styled.div`
   font-size: 1.5rem;
   font-weight: bold;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #ffd0ae 50%);
+  @media (max-width: 414px) {
+    font-size: 1rem;
+  }
 `;
 
 const EmptyWrap = styled.section`

diff --git a/src/pages/mypage/styles.js b/src/pages/mypage/styles.js
@@ -5,17 +5,30 @@ export const Title = styled.h1`
   font-weight: bold;
   margin: 2em 0 3em 0;
   letter-spacing: -0.8px;
+  @media (max-width: 414px) {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
+  }
 `;
 export const Container = styled.div`
   width: 1000px;
   margin: 0 auto;
   padding-bottom: 10%;
+  @media (max-width: 768px) {
+    width: 700px;
+  }
+  @media (max-width: 414px) {
+    width: 100%;
+  }
 `;
 
 export const Content = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
+  @media (max-width: 414px) {
+    display: grid;
+  }
 `;
 
 export const MyPageLink = styled.div`
@@ -44,4 +57,9 @@ export const MyPageTab = styled.div`
   border: 1px solid #f5f5f5;
   margin-left: 2rem;
   width: 70%;
+  @media (max-width: 414px) {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 2rem;
+  }
 `;