chore #9: 반응형 수정

PreOnBoarding-Team17 · Feb 8, 2022 · c40de5b · c40de5b
1 parent 816e083
commit c40de5b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/Components/Common/Card/scss/Card.scss b/src/Components/Common/Card/scss/Card.scss
@@ -2,22 +2,22 @@
 @import '/src/Utils/Styles/mixin';
 
 .card-wrapper {
-  width: 32%;
+  width: calc((100% - 24px) / 3);
   margin-bottom: 16px;
   box-sizing: border-box;
 
   &:nth-child(3n + 2) {
-    margin: 0 2%;
+    margin: 0 12px;
   }
 
   @include responsive(tablet) {
-    width: 49%;
+    width: calc((100% - 12px) / 2);
     &:nth-child(3n + 2) {
       margin: 0;
     }
 
     &:nth-child(2n-1) {
-      margin-right: 2%;
+      margin-right: 12px;
     }
   }
 

diff --git a/src/Components/Dashboard/scss/Dashboard.scss b/src/Components/Dashboard/scss/Dashboard.scss
@@ -1,11 +1,26 @@
 @import '/src/Utils/Styles/mixin';
 
 .body-container {
-  padding: 40px 120px;
+  padding: 40px 0;
+  margin: 0 auto;
   box-sizing: border-box;
-  width: 100%;
+  width: 1130px;
   height: 100%;
 
+  @include responsive(tablet__large) {
+    width: 90%;
+  }
+
+  @include responsive(tablet) {
+    width: 95%;
+  }
+
+  @include responsive(mobile) {
+    width: 100%;
+    margin: 0;
+    padding: 40px 20px;
+  }
+
   &__header {
     margin-bottom: 28px;
     &__title {