[#11] fix: add media query as css

damla · Feb 16, 2021 · e4db60b · e4db60b
1 parent 596ec14
commit e4db60b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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} />}