events page adaptive

src/pages/Events.tsx

@@ -17,6 +17,7 @@ import { eventType } from "../types/eventProps";
 // Helpers
 import { getAllPosts } from "../helpers/apiRequests";
 import { highlightColor } from "../helpers/otherVariables";
+import useMediaQuery from "../hooks/useMediaQuery";
 
 const Events = () => {
   // State
@@ -53,6 +54,8 @@ const Events = () => {
     window.scrollTo(0, 0);
   }, []);
 
+  const breakpoints = useMediaQuery("(max-width: 550px");
+
   return (
     <main className="events-page">
       <div className="container">
@@ -98,7 +101,7 @@ const Events = () => {
                     }}
                   >
                     <Skeleton
-                      height={"30rem"}
+                      height={breakpoints ? "25rem" : "30rem"}
                       highlightColor={highlightColor}
                       style={{ borderRadius: "0.5rem" }}
                     />

src/styles/_events.scss

@@ -54,3 +54,36 @@
     color: #7d7d7d;
   }
 }
+
+// Adaptive
+
+@media screen and (max-width: 1050px) {
+  .events-page-inner {
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .event-page-wrapper {
+    padding-bottom: 8rem;
+  }
+  .event-page-wrapper {
+    gap: 3.2rem;
+  }
+  .events-page {
+    padding-top: 4.8rem;
+  }
+}
+@media screen and (max-width: 550px) {
+  .events-page-inner {
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
+  }
+  .events-page-nav {
+    flex-direction: column;
+  }
+  .events-page-nav-right {
+    display: none;
+  }
+}