From 7b0dcc8d8f759e1ee399b8c97ba0dcd9d0237712 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 10 Aug 2022 23:46:35 +0500
Subject: [PATCH] events page adaptive

---
 src/pages/Events.tsx    |  5 ++++-
 src/styles/_events.scss | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 1a1d827..311bc98 100644
--- a/src/pages/Events.tsx
+++ b/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" }}
                     />
diff --git a/src/styles/_events.scss b/src/styles/_events.scss
index fea2c62..404ab84 100644
--- a/src/styles/_events.scss
+++ b/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;
+  }
+}