responsiveness

elijames-codecov · Aug 3, 2024 · c3d1fc2 · c3d1fc2
1 parent f9ea8d9
commit c3d1fc2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -52,7 +52,6 @@ const Carousel = ({companies}) => {
     maxScrollWidth.current = carousel.current
       ? carousel.current.scrollWidth - movement
       : 0;
-    console.log(window.outerWidth)
   }, []);
 
   return (

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -32,7 +32,7 @@ const seoMeta = {
         </div>
       </div>
     </div>
-    <div class="absolute w-0 lg:w-[53%] 3xl:w-[48%] top-0 right-0 3xl:top-[-1rem] 3xl:right-[-5rem] 2xl:right-[-4.5rem] xl:right-[-4rem] xl:top-[3rem] lg:right-[-3.5rem]">
+    <div class="absolute w-0 lg:w-[47%] 3xl:w-[48%] top-0 right-0 3xl:top-[-1rem] 3xl:right-[-3rem] 2xl:right-[-1rem] xl:right-[-4rem] xl:top-[2rem] lg:right-[-3.5rem]">
       <Image src={heroImage} alt="hero image" densities={[1, 1.5, 2, 3, 4]} class="relative"/>
     </div>
   </header>
@@ -42,11 +42,11 @@ const seoMeta = {
         <Carousel companies={companies} client:load client:only="react" />
       </section>
     }
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/embraceFairSource.svg')] w-full top-0 left-0 right-0 min-h-[20rem] bottom-[75%] md:bottom-[60%] lg:bottom-[55%] lg:bg-cover xl:bg-no-repeat xl:bg-auto xl:left-1/2 xl:w-1/2 xl:bottom-0 xl:right-0 xl:bg-[right_100%_bottom] 2xl:bg-[right_300%_bottom] 3xl:bg-[90%]">
-      <div class="relative w-12/12 p-[25%] xl:p-[10%] xl:w-1/2 flex justify-center justify-center items-center xl:order-12">
-        <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="relative lg:left-[2rem] lg:top-[0.65rem]" />
+    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/embraceFairSource.svg')] w-full top-0 left-0 right-0 min-h-[20rem] bottom-[75%] md:bottom-[60%] md:left-[8%] md:bg-[right_-200%_bottom] md:bg-no-repeat lg:bottom-[55%] lg:bg-cover xl:bg-no-repeat xl:bg-auto xl:left-1/2 xl:w-1/2 xl:bottom-0 xl:right-0 xl:bg-[right_100%_bottom] 2xl:bottom-0 2xl:bg-[right_280%_bottom] 2xl:scale-[1.0125] 3xl:bg-[right_-140%_bottom]">
+      <div class="relative w-12/12 p-[25%] xl:p-[10%] xl:w-1/2 flex justify-center items-center xl:order-12 lg:p-[25%]">
+        <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="absolute xl:w-[75%] xl:top-[-4.5rem] xl:left-[7rem] 2xl:w-[65%] 2xl:top-[-3.5rem] 2xl:left-[9.5rem]" />
       </div>
-      <div class="w-12/12 xl:w-1/2 xl:order-1">
+      <div class="relative w-12/12 xl:w-1/2 xl:order-1">
         <div class="py-[3rem] md:py-[3rem] lg:py-[4rem] xl:py-[6rem] 2xl:py-[6.9rem]">
           <span class="text-teal tag">Embrace Fair Source</span>
           <h2>Learn how to adopt Fair Source at your company</h2>
@@ -55,7 +55,7 @@ const seoMeta = {
         </div>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/learnfairsource.svg')] w-full top-0 left-[-5rem] right-0 min-h-[20rem] bottom-[80%] md:bottom-[60%] lg:bottom-[55%] lg:bg-cover lg:bottom-0 lg:bg-cover xl:h-auto xl:w-1/2 xl:bottom-0 xl:bg-[top-20%_left] xl:h-auto">
+    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/learnfairsource.svg')] w-full top-0 left-[-5rem] right-0 min-h-[20rem] bottom-[80%] md:bottom-[60%] md:bg-no-repeat md:left-[0] lg:bottom-[55%] lg:bg-cover lg:bottom-0 lg:bg-cover xl:h-auto xl:w-1/2 xl:bottom-0 3xl:bg-[top_20%_left] xl:h-auto">
       <div class="w-12/12 xl:w-1/2 h-auto min-h-[20rem] xl:h-full flex items-center justify-center">
         <div class="relative w-1/2 xl:block xl:absolute xl:bottom-0 xl:left-0 xl:w-12/12 xl:w-1/2">
         </div>