feat: 로그인 및 회원가입 페이지 (mobile, tablet) 반응형 추가 및 리펙토링

codeit-bootcamp-frontend · Aug 24, 2024 · 3385161 · mulddang2 · Aug 24, 2024 · 3385161
1 parent 32bc141
commit 3385161
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/css/auth.css b/css/auth.css
@@ -151,3 +151,26 @@ main {
   margin-bottom: 2.4rem;
   height: 5.6rem;
 }
+
+/* Tablet: 768px ~ 1199px 이하 */
+@media (min-width: 768px) and (max-width: 1199px) {
+  main {
+    width: auto;
+    margin: 19rem 5.2rem 32.5rem;
+  }
+}
+
+/* Mobile: 375px ~ 767px 이하 */
+@media (min-width: 375px) and (max-width: 767.99px) {
+  main {
+    width: 100%;
+    max-width: calc(100% - 3.2rem);
+    margin: 8rem 1.6rem 23.1rem;
+  }
+
+  .login__header img,
+  .signup__header img {
+    max-width: 19.7rem;
+    height: auto;
+  }
+}
diff --git a/css/main.css b/css/main.css
@@ -147,7 +147,6 @@ section:nth-of-type(3) .section__card {
   text-align: right;
 }
 
-
 .section__card--text {
   width: 42.6rem;
 }
@@ -213,7 +212,6 @@ footer {
   gap: 1.2rem;
 }
 
-
 /* PC: 1200px 이상 */
 @media (min-width: 1200px) {
   .header__inner {
@@ -261,7 +259,7 @@ footer {
   }
 }
 
-/* Tablet: 769px ~ 1199px 이하 */
+/* Tablet: 768px ~ 1199px 이하 */
 @media (min-width: 768px) and (max-width: 1199px) {
   .header__inner {
     padding: 1rem 2.4rem;