The Great Layout Overhaul - Responsive Design Hell

The Day After

Yesterday, we fixed 11 critical bugs in 2 hours. By midnight, MovieQuest was stable. Swipes worked. Mobile layout looked decent.

We went to bed feeling accomplished.

This morning: Tested the app on an iPad.

Everything was broken again.

"How Hard Can Responsive Design Be?"

The app worked on phones (barely). It worked on desktop (sort of). But tablets? Landscape mode? Different screen sizes?

Complete disaster.

9:19 PM: Time to fix this properly.

Round 1: The Full Responsive Rewrite

First commit: "Implement fully responsive layout for all devices and orientations"

Ambitious. We rewrote the entire layout system:

• Responsive breakpoints for mobile, tablet, desktop
• Portrait and landscape support
• Flexible grid system
• Dynamic sizing

Deployed. Tested.

Everything broke.

Round 2: Emergency Rollback

4 minutes later: "Fix broken layout - restore poster visibility and button positioning"

The "fully responsive" rewrite made posters invisible. Buttons disappeared off-screen. Somehow worse than before.

Panic rollback. Restore basic functionality.

4 minutes later: "Fix overflow and absolute positioning issues"

Still broken. Content overflowing. Absolute positioning causing chaos.

We're 12 minutes in and going backwards.

Round 3: The Quality Tools Detour

14 minutes later: "Add code quality tools: ESLint, Prettier, Husky"

At this point we paused and thought: "Maybe our code is just... bad?"

Added linters, formatters, git hooks. Made the codebase cleaner.

Immediately after: "Add .gitattributes and .editorconfig for consistent formatting"

While we're here, let's fix line endings and indentation too.

13 minutes later: "Install Tailwind CSS properly and add favicon"

We'd been using Tailwind via CDN. Time to install it properly. Also added a favicon because why not.

The layout was still broken, but at least our code was prettier now. 🤷

Round 4: The Absolute Positioning Wars

15 minutes later: "Fix movie card layout - remove absolute positioning"

The root cause: we'd been using position: absolute everywhere. Bad idea.

Switched to flexbox. Better... but not fixed.

16 minutes later: "Fix swipe functionality and two-column layout"

Swipes broken again (classic). Also tried a two-column layout for tablets.

3 minutes later: "Fix desktop layout - add bottom: 0 to movie card"

Desktop cards floating in the middle of nowhere. Added bottom: 0.

4 minutes later: "Fix desktop layout - increase container width from 448px to 896px"

Container too narrow on big screens. Made it wider.

3 minutes later: "Fix container height on desktop and tablets - was collapsing to zero"

Height now zero. Container literally invisible. CSS is fun!

Round 5: The Relative Positioning Revelation

3 minutes later: "Use relative positioning instead of absolute - fixes auto height"

💡 BREAKTHROUGH MOMENT

Stop fighting CSS. Use position: relative. Let the browser figure out heights.

IT WORKED.

Cards appeared. Heights auto-calculated. Layout flowed naturally.

We'd been fighting CSS for an hour. The solution was to stop fighting.

Round 6: Final Touches

4 minutes later: "Fix swipe issues: prevent horizontal scroll and poster blocking"

Horizontal scrolling appeared (mobile web strikes again). Poster blocking touches.

Fixed with overflow-x: hidden and proper z-index.

4 minutes later: "Fix landscape swipe by moving touch-action to container"

Landscape mode swipes still wonky. Moved touch-action: none to parent container.

FINALLY. IT WORKED.

The Battle Stats

Total Duration: ~1 hour 30 minutes Commits: 13 layout-related commits Approaches Tried:

• ❌ Full responsive rewrite (too ambitious)
• ❌ Absolute positioning everywhere (chaos)
• ❌ Fixed width containers (doesn't scale)
• ✅ Relative positioning + flexbox (the answer all along)

Lessons Re-Learned:

• Don't rewrite everything at once
• Absolute positioning is the devil
• Let CSS do its job (flexbox, auto heights)
• Test on REAL devices, not just browser resize

What Actually Worked

The winning formula:

/* Container */
.movie-container {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 896px;
  height: auto; /* Let it calculate! */
}

/* Card */
.movie-card {
  position: relative; /* Not absolute! */
  flex: 1;
  overflow: hidden;
}

/* Touch */
.swipe-container {
  touch-action: none; /* Parent level */
  overflow-x: hidden; /* No horizontal scroll */
}

Simple. Clean. Works everywhere.

Why We Struggled

Mistake #1: Fighting The Browser

We kept trying to control every pixel. Use absolute positioning, fixed heights, precise calculations.

Better approach: Let flexbox and auto-sizing do the work.

Mistake #2: Desktop-First Thinking

Built for desktop. Added mobile as afterthought.

Better approach: Mobile-first, progressively enhance.

Mistake #3: Big Rewrites

"Let's rewrite the whole layout!" → Everything breaks.

Better approach: Small, incremental changes.

Mistake #4: Not Testing Enough

Tested on iPhone and desktop. Forgot about:

• Android tablets
• iPad landscape
• Small laptops (13")
• Ultra-wide monitors

Every device has its own quirks.

Tools That Saved Us

✅ Tailwind CSS - Utility classes made iteration fast ✅ ESLint/Prettier - Caught CSS mistakes early ✅ Chrome DevTools - Device emulation (imperfect but helpful) ✅ Real Devices - Actual iPhone, iPad, Android phone

You can't fix what you can't see.

The Result

By 10:46 PM, MovieQuest finally worked on:

• ✅ iPhone (portrait & landscape)
• ✅ Android phones (all sizes)
• ✅ iPad (portrait & landscape)
• ✅ Tablets (7" to 12")
• ✅ Laptops (13" to 17")
• ✅ Desktop (ultra-wide monitors)

All from one codebase. No separate mobile site. Pure responsive CSS.

Tomorrow's Problem

The app works. Layout is solid. Swipes are reliable.

But we still want it on mobile devices as a REAL app. Not just a website.

Time to explore Flutter.

---

MovieQuest - Now actually responsive.

Try it on any device: movie-quests.vercel.app