Browse Source

add the homepage's responsive

AlexiCauvin 6 years ago
parent
commit
944a407005
2 changed files with 13 additions and 1 deletions
  1. 1 1
      src/container/Homepage.jsx
  2. 12 0
      src/css/HomepageCard.styl

+ 1 - 1
src/container/Homepage.jsx View File

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

+ 12 - 0
src/css/HomepageCard.styl View File

20
   &__logo
20
   &__logo
21
     margin-left calc(50% - 90px) /* 90px => width: 180px / 2 */
21
     margin-left calc(50% - 90px) /* 90px => width: 180px / 2 */
22
     width 180px
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