matt
/
portamador-landing-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix marina image top alignment to match heading
Build And Push Image / docker (push) Successful in 2m8s Details 

- Adjusted image container to align precisely with Connect with us heading
- Top of image now starts at the same level as the C in the heading
- Used CSS grid and proper height calculation for accurate alignment
- Changed object-position to center top for better visual alignment
This commit is contained in:
Matt 2025-09-23 00:00:21 +02:00
parent d699c2522a
commit 6aa4284c7b
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/page.tsx
View File

@ -539,27 +539,29 @@ export default function Home() {
// Desktop Layout - Responsive with aligned image
<div className="min-h-screen flex flex-col relative pt-[10vh] lg:pt-[15vh] xl:pt-[200px]">
<div className="w-full max-w-[1600px] mx-auto px-8 lg:px-[80px]">
<div className="flex flex-col lg:flex-row gap-8 lg:gap-0">
<div className="flex flex-col lg:grid lg:grid-cols-[45%_55%] gap-8 lg:gap-0">
{/* Left Side - Marina Image Container */}
<div className="order-2 lg:order-1 w-full lg:w-[45%]">
<div className="lg:pr-[40px] h-full">
{/* On mobile: fixed height, on desktop: match form height */}
<div className="relative h-[400px] lg:h-full">
<Image
src="/marina.jpg"
alt="Port Amador Marina"
fill
className="object-cover object-center"
sizes="(max-width: 1024px) 100vw, 45vw"
priority
style={{ objectPosition: 'center' }}
/>
<div className="order-2 lg:order-1">
<div className="lg:pr-[40px] h-[400px] lg:h-auto">
{/* Image positioned to align with heading */}
<div className="relative h-full lg:sticky lg:top-0">
<div className="absolute inset-0 lg:relative lg:h-[calc(72px+3rem+400px)]">
<Image
src="/marina.jpg"
alt="Port Amador Marina"
fill
className="object-cover"
sizes="(max-width: 1024px) 100vw, 45vw"
priority
style={{ objectPosition: 'center top' }}
/>
</div>
</div>
</div>
</div>
{/* Right Side - Form Section */}
<div className="order-1 lg:order-2 w-full lg:w-[55%]">
<div className="order-1 lg:order-2">
<div className="lg:pl-[40px]">
{/* Form content wrapper */}
<div className="flex flex-col">