align: unify container width to max-w-container across all pages; fix banner edge alignment
The Featured-story card's right edge wasn't lining up with any of the
ad banners below or beside it on the homepage. Two root causes:
1. Pages I redesigned (/about, /about/contact, /about/team,
/about/advertise, /show-coverage/[slug]) used `max-w-6xl px-6`
(1152px / 24px-pad). Every other page uses `max-w-container
px-4` (1200px / 16px-pad). Pages didn't line up with the
header leaderboard or with each other.
2. ArticleFeed used a flexible 12-col grid where lg:col-span-4
ends up ~280px wide (depending on container) — so the 300x250
image inside the sidebar didn't extend to the column's right
edge, leaving a visual gap relative to the full-width Featured
card above.
Fix:
- All redesigned pages now use `max-w-container mx-auto px-4`.
- ArticleFeed switches to `lg:grid-cols-[1fr,300px]` so the sidebar
column is *exactly* 300px wide. The 300x250 ads fill that column
flush, so their right edge meets the container's right padding
edge — same x-position as the Featured card's right edge above.
Also linkified the "Relevant Media Properties" copyright string in
Footer.tsx → opens https://www.relevantmediaproperties.com/ in a new
tab.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,7 +14,7 @@ export default function AdvertisePage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
|
<div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
|
||||||
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
||||||
<main>
|
<main>
|
||||||
<header className="mb-8 border-b border-[#252525] pb-6">
|
<header className="mb-8 border-b border-[#252525] pb-6">
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default function ContactPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
|
<div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
|
||||||
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
||||||
<main>
|
<main>
|
||||||
<header className="mb-8 border-b border-[#252525] pb-6">
|
<header className="mb-8 border-b border-[#252525] pb-6">
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export default function AboutPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
|
<div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
|
||||||
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
||||||
<main>
|
<main>
|
||||||
<header className="mb-8 border-b border-[#252525] pb-6">
|
<header className="mb-8 border-b border-[#252525] pb-6">
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ export default async function TeamPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
|
<div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
|
||||||
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
<div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
|
||||||
<main>
|
<main>
|
||||||
<header className="mb-8 border-b border-[#252525] pb-6">
|
<header className="mb-8 border-b border-[#252525] pb-6">
|
||||||
|
|||||||
@@ -271,10 +271,11 @@ export default function ArticleFeed() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="max-w-container mx-auto px-4 py-4 md:py-6">
|
<section className="max-w-container mx-auto px-4 py-4 md:py-6">
|
||||||
{/* Main layout */}
|
{/* Main layout — fixed 300px sidebar so right edge of 300x250 ads
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
|
lines up with the right edge of the Featured-story card above. */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr,300px] gap-6 lg:gap-8">
|
||||||
{/* Main Feed */}
|
{/* Main Feed */}
|
||||||
<div className="lg:col-span-8">
|
<div className="min-w-0">
|
||||||
{/* Section header */}
|
{/* Section header */}
|
||||||
<div className="flex items-center gap-3 mb-4 md:mb-5 flex-wrap">
|
<div className="flex items-center gap-3 mb-4 md:mb-5 flex-wrap">
|
||||||
<span className="section-label">The Latest</span>
|
<span className="section-label">The Latest</span>
|
||||||
@@ -725,7 +726,7 @@ export default function ArticleFeed() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sidebar — Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
|
{/* Sidebar — Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
|
||||||
<aside className="lg:col-span-4" aria-label="Advertisements">
|
<aside aria-label="Advertisements">
|
||||||
<div className="lg:sticky lg:top-24">
|
<div className="lg:sticky lg:top-24">
|
||||||
<SidebarAdStack />
|
<SidebarAdStack />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -163,7 +163,7 @@ export default async function EventCoveragePage({
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-10 text-[#e5e7eb]">
|
<div className="max-w-container mx-auto px-4 py-10 text-[#e5e7eb]">
|
||||||
<script
|
<script
|
||||||
type="application/ld+json"
|
type="application/ld+json"
|
||||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
|
||||||
|
|||||||
@@ -140,7 +140,15 @@ export default function Footer() {
|
|||||||
<div className="flex items-center gap-4 text-xs font-body text-[#555]">
|
<div className="flex items-center gap-4 text-xs font-body text-[#555]">
|
||||||
<Link href="/privacy" className="hover:text-[#3b82f6] transition-colors">Privacy Policy</Link>
|
<Link href="/privacy" className="hover:text-[#3b82f6] transition-colors">Privacy Policy</Link>
|
||||||
<Link href="/terms" className="hover:text-[#3b82f6] transition-colors">Terms of Service</Link>
|
<Link href="/terms" className="hover:text-[#3b82f6] transition-colors">Terms of Service</Link>
|
||||||
<span>© 2026 Relevant Media Properties. All rights reserved.</span>
|
<span>
|
||||||
|
© 2026 <a
|
||||||
|
href="https://www.relevantmediaproperties.com/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:text-[#3b82f6] transition-colors underline-offset-2 hover:underline">
|
||||||
|
Relevant Media Properties
|
||||||
|
</a>. All rights reserved.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user