hero image responsive styling fixes

elijames-codecov · Aug 5, 2024 · 7fcbce0 · 7fcbce0
1 parent 6dc477b
commit 7fcbce0
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -22,11 +22,13 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
 
 <Layout title="Software Sharing for Modern Companies" seo={seoMeta}>
   <header>
-    <div class="container-spill relative mx-auto flex flex-wrap px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem]">
-      <div class="relative block lg:absolute lg:right-0 lg:bottom-0 lg:top-0 lg:w-1/2 xl:w-[45%] xl:right-[2rem] 2xl:right-[3.62rem] 3xl:right-0">
-        <Image src={heroImage} alt="hero image" densities={[1, 1.5, 2, 3, 4]} class="relative"/>
+    <div class="container-spill relative mx-auto flex flex-wrap items-stretch px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem] items-stretch">
+      <div class="relative w-12/12 mx-auto flex lg:w-6/12 lg:h-[100%] lg:order-12">
+        <div class="">
+         <Image src={heroImage} alt="hero image" densities={[1, 2, 3, 4]}/>
+        </div>
       </div>
-      <div class="w-12/12 py-[3rem] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
+      <div class="w-12/12 py-[3rem] h-[100%] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
         <h1 class="text-black mb-4">
           Software Sharing for Modern Companies
         </h1>