Merge pull request #141 from Vizzuality/SKY30-195-c-1-review-styling-…

…formatting-on-the-contact-page [SKY30-195] Rework base Contact page layout in order to eliminate screen size issues
Vizzuality · Jan 18, 2024 · a73ee8d · a73ee8d
2 parents a152cc6 + 5243cd8
commit a73ee8d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/layouts/fullscreen.tsx b/frontend/src/layouts/fullscreen.tsx
@@ -19,7 +19,9 @@ const FullscreenLayout: React.FC<PropsWithChildren<FullscreenLayoutProps>> = ({
       <div className="flex-shrink-0">
         <Header />
       </div>
-      <div className="h-full border-x border-b border-black">{children}</div>
+      <div className="relative border-x border-b border-black md:h-full md:overflow-hidden">
+        {children}
+      </div>
     </div>
   </>
 );

diff --git a/frontend/src/pages/contact.tsx b/frontend/src/pages/contact.tsx
@@ -10,15 +10,20 @@ const ContactUsPage = () => {
       <Script id="hs-script-loader" async defer src="//js.hs-scripts.com/44434484.js"></Script>
       {/* <!-- End of HubSpot Embed Code --> */}
       <Layout title="Contact Us">
-        <div className="px-6 md:mx-auto md:max-w-7xl md:px-6 lg:px-10">
-          <div className="my-8 grid grid-rows-1 gap-10 md:grid-cols-2 md:grid-rows-none">
-            <div className="space-y-2 md:bg-[url('/images/static-pages/bg-images/cta-3.png')] md:bg-left md:bg-no-repeat">
+        <div className="flex h-full flex-col gap-10 px-6 pt-16 md:mx-auto md:max-w-7xl md:flex-row md:gap-20 md:px-6 lg:px-8">
+          <div className="flex flex-col gap-10 md:w-[40%]">
+            <div className="flex flex-grow flex-col gap-3">
               <h2 className="text-[70px] font-black leading-none">
                 Want to <br />
                 know more?
               </h2>
               <h3 className="text-xl font-black">Get it touch.</h3>
             </div>
+            <div className="hidden flex-grow items-end pr-10 md:flex md:h-full">
+              <span className="h-full w-full bg-contain bg-bottom md:bg-[url('/images/static-pages/bg-images/cta-3.png')] md:bg-no-repeat" />
+            </div>
+          </div>
+          <div className="overflow-y-scroll pb-10 md:-mr-4 md:pr-4 md:pl-2">
             <ContactUsForm />
           </div>
         </div>