소스 검색

add the homepage's responsive

AlexiCauvin 6 년 전
부모
커밋
944a407005
2개의 변경된 파일13개의 추가작업 그리고 1개의 파일을 삭제
  1. 1 1
      src/container/Homepage.jsx
  2. 12 0
      src/css/HomepageCard.styl

+ 1 - 1
src/container/Homepage.jsx 파일 보기

@@ -5,7 +5,7 @@ class Homepage extends Component {
5 5
   render () {
6 6
     return (
7 7
       <section className='homepage'>
8
-        <div className='container-fluid'>
8
+        <div className='container-fluid nopadding'>
9 9
           <HomepageCard />
10 10
         </div>
11 11
       </section>

+ 12 - 0
src/css/HomepageCard.styl 파일 보기

@@ -20,3 +20,15 @@
20 20
   &__logo
21 21
     margin-left calc(50% - 90px) /* 90px => width: 180px / 2 */
22 22
     width 180px
23
+
24
+/**** MEDIA QUERIES ****/
25
+
26
+@media (min-width: min-sm) and (max-width: max-sm)
27
+
28
+  .homepagecard
29
+    width 575px
30
+
31
+@media (max-width: max-xs)
32
+
33
+  .homepagecard
34
+    width 380px