Mobile-First Responsive Layout Patterns

Inputs To Collect First

1. Layout pattern type (hero, feature grid, 2-column timeline, 2/3+1/3 sidebar, testimonial row, etc.)
2. Number of desktop columns and whether items are fixed or dynamic in count
3. Background treatment (solid brand colour, background image with overlay, transparent)
4. Whether the section contains CTA buttons that need to stack on mobile

Procedure

Step 1 — Identify the Layout Pattern

Step 2 — Section Shell Template

Every page section uses this wrapper pattern:

<section className="bg-bg-white px-4 py-16 sm:px-6 md:py-24 lg:px-8">
  <div className="mx-auto max-w-5xl">
    {/* content */}
  </div>
</section>

Variants: narrow prose → max-w-3xl; dark background → bg-bg-dark; full-bleed → remove px-* from outer <section>.

Step 3 — Grid Layouts

{/* 2-column (50/50) */}
<div className="grid gap-8 md:grid-cols-2">

{/* 3-column equal */}
<div className="grid gap-8 md:grid-cols-3">

{/* 2/3 + 1/3 sidebar */}
<div className="grid gap-8 lg:grid-cols-[2fr_1fr]">

{/* Auto-fit (dynamic count) */}
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

Step 4 — Typography Scaling

Always use the dual-size pattern:

<h1 className="text-[36px] font-bold leading-tight text-brand-primary md:text-[52px]">
<h2 className="text-[26px] font-semibold text-brand-primary md:text-[36px]">
<h3 className="text-[20px] font-semibold text-brand-primary md:text-[24px]">
<p  className="text-[16px] font-normal leading-relaxed text-brand-secondary md:text-[17px]">

Step 5 — Touch Target Compliance

All interactive elements must meet 44x44 px minimum:

{/* Button: py-3 achieves ~44px */}
<button className="px-6 py-3 text-[16px]">CTA</button>

{/* Icon button: explicit sizing */}
<button className="flex h-11 w-11 items-center justify-center">
  <svg className="h-5 w-5" />
</button>

{/* Nav links: add padding for tap area */}
<Link className="py-2 px-1 text-[16px]">Link</Link>

Step 6 — Stacking Multi-Column CTAs

Button groups that are horizontal on desktop, stacked on mobile:

<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
  <Link href="/quote"
    className="w-full rounded-md bg-brand-primary px-8 py-3 text-center text-[16px] font-semibold text-white transition-colors hover:bg-accent-blue sm:w-auto">
    Get a Free Quote
  </Link>
  <Link href="/how-it-works"
    className="text-[16px] font-semibold text-brand-primary underline underline-offset-4 transition-colors hover:text-accent-blue">
    See How It Works
  </Link>
</div>

Step 7 — Hero Section with Background Image

<section className="relative overflow-hidden min-h-[520px] md:min-h-[640px] px-4 pb-16 pt-20 sm:px-6 md:pb-24 md:pt-28 lg:px-8">
  <Image src="/hero-image.webp" alt="..." fill priority sizes="100vw"
    className="object-cover object-center z-0" unoptimized />
  <div className="absolute inset-0 z-10 bg-gradient-to-r from-[#F0EBD8]/90 via-[#F0EBD8]/70 to-transparent" />
  <div className="relative z-20 mx-auto max-w-4xl text-center">
    <h1 className="text-[36px] font-bold leading-tight text-brand-primary md:text-[52px]">
      Heading
    </h1>
  </div>
</section>

Step 8 — Safe Area and Viewport Edge Handling

{/* Mobile sticky bottom bar */}
<div className="fixed bottom-0 left-0 right-0 pb-safe">
  {/* pb-safe = env(safe-area-inset-bottom) */}
</div>

/* globals.css */
@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

Step 9 — Handling Text Overflow for i18n

Italian and English strings differ in length:

{/* Prevent wrapping in navigation */}
<span className="whitespace-nowrap">Get a Quote</span>

{/* Allow long Italian words to break */}
<p className="break-words leading-relaxed">{t('longItalianParagraph')}</p>

{/* Eyebrow labels: constrain to single line */}
<p className="truncate text-[13px] uppercase tracking-wider">{t('eyebrow')}</p>

Constraints: Always design mobile-first (zero-prefix state first, then sm:, md:, lg:). Do NOT use fixed pixel widths on containers. Do NOT use flex-wrap as a layout strategy for grids — use grid. Do NOT use overflow-x: scroll on sections. Avoid absolute positioning for layout (reserve for overlays).

Completion Checks

• No horizontal scroll at 375 px viewport width
• All multi-column grids use md:grid-cols-* — default state is single column (no prefix)
• All interactive elements meet 44x44 px minimum touch target
• Button groups use flex-col sm:flex-row pattern
• Section outer wrapper uses py-16 md:py-24 vertical padding
• Hero section declares min-h-[520px] md:min-h-[640px]
• Images contained within parent and do not overflow on mobile
• No fixed pixel widths on any <img> or container element
• Both it and en locale text lengths verified at all intended breakpoints

References

• Local implementation notes
• Tailwind CSS — Responsive Design
• MDN — CSS Grid Layout
• MDN — Viewport meta tag
• WCAG — Touch Target Size guideline