[#48] 메인페이지 아이패드 프로기준 반응형 작업 완료

bithumbNFT · Oct 9, 2021 · f2ec195 · f2ec195
1 parent 4dd8129
commit f2ec195
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 1 deletion.
diff --git a/src/components/Common/Footer/index.js b/src/components/Common/Footer/index.js
@@ -86,4 +86,9 @@ export const FooterBox = styled.footer`
       margin-left: 0;
     }
   }
+  @media (max-width: 1024px) {
+    .footerTitle {
+      font-size: 1.6rem;
+    }
+  }
 `;
diff --git a/src/components/Common/Header/styles.js b/src/components/Common/Header/styles.js
@@ -21,6 +21,13 @@ export const Gnb = styled.nav`
     justify-content: space-between;
     padding: 0 2em;
   }
+  // 아이패드 기준
+  @media (max-width: 1024px) {
+    .navWrap {
+      padding: 0;
+      max-width: 900px;
+    }
+  }
 `;
 
 export const Title = styled.button`
@@ -35,13 +42,13 @@ export const User = styled.ul`
   li {
     color: #4a4a4a;
     line-height: 1.5;
-    font-size: 1rem;
     margin-left: 1em;
     &.user {
       border: 1px solid #dbdbdb;
       border-radius: 5px;
       button {
         padding: 5px 8px;
+        font-size: 16px;
       }
     }
   }
@@ -89,6 +96,20 @@ export const Menu = styled.div`
       opacity: 1;
     }
   }
+  @media (max-width: 1024px) {
+    .board {
+      font-size: 1.2rem;
+    }
+    input {
+      &::placeholder {
+        font-size: 1.2rem;
+      }
+    }
+
+    li {
+      font-size: 1.2rem;
+    }
+  }
 `;
 
 export const UserProfile = styled.div`

diff --git a/src/components/Common/Member/index.js b/src/components/Common/Member/index.js
@@ -40,6 +40,10 @@ const MemberPhoto = styled.div`
     width: 100%;
     margin-left: 18px;
   }
+  @media (max-width: 1024px) {
+    width: 160px;
+    height: 160px;
+  }
 `;
 
 const MemberInfo = styled.div`

diff --git a/src/components/Home/CoinHeader/style.js b/src/components/Home/CoinHeader/style.js
@@ -5,6 +5,9 @@ export const TableWrapper = styled.div`
   border: 1px solid #9e9e9e;
   border-radius: 5px;
   margin-bottom: 10px;
+  @media (max-width: 1024px) {
+    padding: 30px;
+  }
 `;
 export const TableContainer = styled.table`
   font-size: 16px;

diff --git a/src/components/Home/Intro/style.js b/src/components/Home/Intro/style.js
@@ -16,7 +16,13 @@ export const ChartWrap = styled.section`
     font-size: 32px;
     text-align: center;
   }
+  @media (max-width: 1024px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+  }
 `;
+
 export const Chart = styled.article`
   display: flex;
   justify-content: center;
@@ -64,6 +70,9 @@ export const CoinDesc = styled.div`
     font-weight: 400;
     text-align: center;
   }
+  @media (max-width: 1024px) {
+    width: 900px;
+  }
 `;
 
 export const InfoDesc = styled.div`
@@ -85,6 +94,11 @@ export const InfoDesc = styled.div`
   img {
     width: 20px;
   }
+  @media (max-width: 1024px) {
+    h4 {
+      font-size: 1.5rem;
+    }
+  }
 `;
 
 export const InfoLeft = styled.div`

diff --git a/src/pages/home/styles.js b/src/pages/home/styles.js
@@ -15,6 +15,9 @@ export const Title = styled.h2`
 export const CardWrap = styled.div`
   width: 1000px;
   margin: 0 auto;
+  @media (max-width: 1024px) {
+    width: 950px;
+  }
 `;
 
 export const CardListBox = styled.article`