feat (media queries) : mobile screens (#8)

codexarama · Apr 26, 2021 · 0db63dc · 0db63dc
1 parent 13a86ff
commit 0db63dc
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 83 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/js/profile.js b/js/profile.js
@@ -9,10 +9,10 @@ const btnContact = document.querySelector('.btn-contact');
 const setId = (photographer) => {
   const id = elmtFactory(
     'article',
-    { class: 'id' },
+    { class: 'id__card' },
     elmtFactory(
       'div',
-      { class: 'id__card' },
+      { class: 'id__infos' },
       elmtFactory('h2', { class: 'card__name' }, `${photographer.name}`),
       elmtFactory(
         'p',

diff --git a/sass/base/_base.scss b/sass/base/_base.scss
@@ -9,6 +9,7 @@
 body {
   box-sizing: border-box;
   width: 90%;
+  max-width: 1150px;
   margin: 10px auto;
 
   a,

diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -17,6 +17,11 @@ body {
   }
 }
 
+nav {
+  text-align: center;
+  line-height: 2em;
+}
+
 .card {
   &__name {
     font-size: $l;

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
@@ -35,7 +35,6 @@
 // liste déroulante FILTRES : "popularité" - "date" - "titre"
 // page pro photographe
 .filter {
-
   &__title {
     margin-right: 10px;
     margin-top: 10px;
@@ -115,3 +114,16 @@
     }
   }
 }
+
+@media only screen and (max-width: 600px) {
+  .btn-homepage {
+    display: none;
+  }
+  .id__contact {
+    margin-top: 10px;
+    position: fixed;
+    bottom: 25px;
+    width: 90%;
+    text-align: center;
+  }
+}
diff --git a/sass/layout/_card.scss b/sass/layout/_card.scss
@@ -1,9 +1,5 @@
 .card {
-  display: flex;
-  flex-direction: column;
   width: 33%;
-  justify-content: center;
-  align-items: center;
   text-align: center;
   margin-bottom: 50px;
 
@@ -33,3 +29,10 @@
     margin-top: 10px;
   }
 }
+
+@media only screen and (max-width: 600px) {
+  .card {
+    width: 100%;
+    margin-bottom: 25px;
+  }
+}
diff --git a/sass/layout/_filter.scss b/sass/layout/_filter.scss
@@ -1,4 +1,10 @@
 .filter {
-    display: inline-flex;
-    margin: 50px 0;
-   }
+  display: inline-flex;
+  margin: 50px 0;
+}
+
+@media only screen and (max-width: 600px) {
+  .filter {
+    display: none;
+  }
+}