From 9caaab0e8efceae931712bae7df333b5a1d7c8a4 Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Sat, 24 Jun 2023 18:39:06 +0500
Subject: [PATCH] website: fix hero layout for small height screens (#2609)

---
 website/src/_includes/hero.html |  2 +-
 website/src/css/style.css       | 44 ++++++++++++++++++++++-----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/website/src/_includes/hero.html b/website/src/_includes/hero.html
index a59e91e70f..38001afd96 100644
--- a/website/src/_includes/hero.html
+++ b/website/src/_includes/hero.html
@@ -1,7 +1,7 @@
 <div class="first-two-sections pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
     <div class="md:flex md:flex-col-reverse md:items-center xl:flex xl:flex-row xl:items-start relative xl:justify-between xl:gap-10 container">
         <div class="">
-            <section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
+            <section class="xl:h-[calc(100vh-66px)] hero-section-1 xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
                 <div class="xl:h-full flex flex-col items-center xl:items-start xl:justify-around w-full landing-page-header-div">
                     {# <img class="static-phone-tablet hidden md:block xl:hidden" src="/img/new/tab-hero.svg" alt="" /> #}
                     <img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />
diff --git a/website/src/css/style.css b/website/src/css/style.css
index 284831e41c..769dbee860 100644
--- a/website/src/css/style.css
+++ b/website/src/css/style.css
@@ -628,20 +628,6 @@ header{
   }
 }
 
-.tablet-hero-phone-background {
-  background-image: url("../Images/bg_gfx.png");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  position: absolute;
-  width: 40%;
-  top: 5%;
-  left: 30%;
-}
-.tablet-hero-phone {
-  transform: skewY(25deg);
-}
-
 /* Overlays */
 .overlay a,
 p a{
@@ -936,4 +922,32 @@ p a{
 
 .glossary-overlay ol li {
   list-style: decimal;
-}
\ No newline at end of file
+}
+
+/* media queries for hero section for short height screens */
+.hero-section-1{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+@media screen and (max-height: 760px) and (min-width: 1280px), screen and (max-height: 860px) and (min-width: 1280px) and (max-width: 1399px) {
+  .hero-section-1{
+    height: 100%;
+  }
+
+  h1{
+    font-size: 48px !important;
+  }
+  h2{
+    font-size: 36px !important;
+  }
+}
+
+@media screen and (max-height: 780px) {
+  .hero-phone-background{
+    height: 100%;
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+    top: calc(66px + 2rem);
+  }
+}