Merge branch 'feat/add-mentors-list-grid' into feat/add-mentors-list

src/components/commons/header/Header.css

@@ -14,6 +14,7 @@
     box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
     display: flex;
     justify-content: center;
+    z-index: 1;
 }
 
 /* Class used to keep the header at the top of the page even when it is rolled */

src/components/mentors/Mentor.css

@@ -1,6 +1,46 @@
+.mentor-grid {
+    display: grid;
+    width: 100%;
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    .mentor-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+    .mentor-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+    .mentor-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+    .mentor-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+    .mentor-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
 .img-mentor {
     border-radius: 100%;
-    width: 200px;
+    width: 100%;
     filter: grayscale(100%);
     transition: all 0.7s ease;
 }
@@ -54,8 +94,3 @@
     visibility: visible;
     opacity: 1;
 }
-
-.mentors {
-    display: flex;
-    flex-wrap: wrap;
-}

src/components/mentors/MentorGrid.js

@@ -17,7 +17,7 @@ const renderMentors = (mentorsList: Mentor[]) => {
 };
 
 const MentorGrid = () => (
-    <ul className="mentors">{renderMentors(getMentors())}</ul>
+    <div className="mentor-grid">{renderMentors(getMentors())}</div>
 );
 
 export default MentorGrid;