Increase top padding/spacing in the footer #134

New Issue

Closed

opened 2026-05-18 09:19:41 -05:00 by null · 0 comments

null commented

2026-05-18 09:19:41 -05:00

Owner

UI Issue

The footer needs more vertical spacing at the top before the content text begins. Currently py-12 (3rem) is used on the inner container, but the top feels cramped — the logo, company name, and tagline start too close to the section boundary.

Location

src/components/layout/Footer.jsx — the outer <div>:

<footer className="bg-primary-navy text-white">
  <div className="container mx-auto px-4 py-12">

py-12 applies equal top/bottom padding (3rem). The top needs more breathing room.

Suggested Fix

Switch from uniform py-12 to asymmetric padding — e.g. pt-16 pb-12 (4rem top, 3rem bottom) or pt-20 pb-12 (5rem top, 3rem bottom) — to give the footer content more space from the page content above it.

Alternatively, add mt-8 or mt-12 to the <footer> element itself to push it down from the preceding content.

## UI Issue The footer needs more vertical spacing at the top before the content text begins. Currently `py-12` (3rem) is used on the inner container, but the top feels cramped — the logo, company name, and tagline start too close to the section boundary. ## Location `src/components/layout/Footer.jsx` — the outer `<div>`: ```jsx <footer className="bg-primary-navy text-white"> <div className="container mx-auto px-4 py-12"> ``` `py-12` applies equal top/bottom padding (3rem). The top needs more breathing room. ## Suggested Fix Switch from uniform `py-12` to asymmetric padding — e.g. `pt-16 pb-12` (4rem top, 3rem bottom) or `pt-20 pb-12` (5rem top, 3rem bottom) — to give the footer content more space from the page content above it. Alternatively, add `mt-8` or `mt-12` to the `<footer>` element itself to push it down from the preceding content.