From e4db60b71e1b74b8aa09463c4f7db8032597850f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damla=20K=C3=B6ksal?= <me@damlakoksal.com>
Date: Tue, 16 Feb 2021 16:56:57 +0300
Subject: [PATCH] [#11] fix: add media query as css

---
 components/section/section.component.tsx | 6 ++----
 components/section/section.module.scss   | 9 +++++----
 pages/index.tsx                          | 7 +------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/components/section/section.component.tsx b/components/section/section.component.tsx
index 5d8b86b..94a116c 100644
--- a/components/section/section.component.tsx
+++ b/components/section/section.component.tsx
@@ -18,14 +18,12 @@ export default function Section ({
   banner,
   relative,
   minHeight,
-  marginBottom,
-  marginTop
+  marginBottom
 }: Props
 ): ReactElement {
   const style: CSSProperties = {
     minHeight: minHeight,
-    marginBottom: marginBottom,
-    marginTop: marginTop
+    marginBottom: marginBottom
   }
 
   return (
diff --git a/components/section/section.module.scss b/components/section/section.module.scss
index 9c2efe6..c3a5c4a 100644
--- a/components/section/section.module.scss
+++ b/components/section/section.module.scss
@@ -13,16 +13,17 @@
 
   &__banner {
     min-height: 70vh;
+    margin-top: 4.1rem;
 
     &:first-child {
       max-height: 50%;
     }
-  }
-  @media only screen and (max-width: variables.$max-width-tablet) {
-    margin-bottom: 0 !important;
+    @media only screen and (min-width: variables.$max-width-tablet) and (max-width: variables.$max-width-tabletOrMobile) {
+      margin-top: calc(65px + 2rem);
+    }
   }
 
   @media only screen and (max-width: variables.$max-width-tablet) {
-    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index bbb060b..e5d9b1e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,6 @@ import Logo from '../components/logo/logo.component'
 import { CommonModel, HomePageModel } from '../interfaces/index'
 import { getBase64Values } from '../utils/imageUtils'
 import { getData } from '../utils/dbUtils'
-import { useMediaQuery } from 'react-responsive'
 
 interface Props {
   common: CommonModel
@@ -46,10 +45,6 @@ export default function HomePage ({
   Base64Values
 }: Props
 ): ReactElement {
-  const isTablet = useMediaQuery({
-    query: '(min-width: 475px) and (max-width: 1130px)'
-  })
-
   function scrollToSection (sectionId: string): void {
     if (typeof window !== 'undefined') {
       document?.querySelector(`#${sectionId}`)?.scrollIntoView({ behavior: 'smooth' })
@@ -62,7 +57,7 @@ export default function HomePage ({
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Layout data={common}>
-        <Section id="section-1" banner marginBottom="10vh" marginTop={isTablet ? 'calc(65px + 2rem)' : '4.1rem'}>
+        <Section id="section-1" banner marginBottom="10vh">
           <Content
             backgroundColor={'#F9F8F4'}
             left={<Logo width={90} height={60} />}