Poor Responsive Design

Furniture that doesn't fit through the door — that's your desktop layout crammed onto a mobile screen. Make it adapt properly.

What is this?

You bought a beautiful king-size sofa, got it home, and realized it does not fit through the front door. That is what poor responsive design looks like — a layout built for a big screen that simply does not fit on a smaller one. Content overflows horizontally, columns overlap, images stretch beyond the viewport, and your visitors have to scroll sideways just to see everything. Responsive design means your layout adapts gracefully to any screen size, from a 320px phone to a 2560px ultrawide monitor.

Why it matters

For your visitors: Horizontal scrolling on mobile is one of the most frustrating web experiences. Content that spills off-screen, overlapping elements, and text that runs off the edge makes your site feel broken. Visitors will not troubleshoot your layout — they will leave.
For your business: Over 60% of web traffic is mobile, and that number keeps growing. If your site only works on desktop, you are alienating the majority of your visitors. Google indexes mobile-first, meaning your mobile experience is what determines your search ranking — not your desktop version.
The standard: Every page should work on viewports from 320px wide and up. No horizontal overflow. No content cut off. No overlapping elements. Use a mobile-first approach: design for the smallest screen first, then enhance for larger screens with media queries or container queries.

Responsive layout

.feature-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }
}

Fixed-width layout

.feature-grid {
  display: flex;
  width: 1200px; /* fixed — overflows on mobile */
}
.feature-card {
  width: 380px; /* fixed — cannot adapt */
}

How to fix it

React / Next.js

Use Tailwind's responsive prefixes to build mobile-first layouts.

function FeatureSection() {
  return (
    <section className="px-4 py-12 md:px-8 lg:px-16">
      {/* Stack on mobile, 2 cols on tablet, 3 on desktop */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <FeatureCard title="Fast Scans" description="Results in under 30 seconds" />
        <FeatureCard title="Real Advice" description="Actionable, not academic" />
        <FeatureCard title="Cat Approved" description="Rated in paws, not stars" />
      </div>
    </section>
  );
}

// Images that adapt to their container
function ResponsiveImage({ src, alt }: { src: string; alt: string }) {
  return (
    <img
      src={src}
      alt={alt}
      className="h-auto w-full" // w-full + h-auto = responsive
    />
  );
}

Prevent horizontal overflow at the root:

/* globals.css — nuclear option for horizontal overflow */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Make all images responsive by default */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent long strings from breaking layout */
* {
  overflow-wrap: break-word;
  word-break: break-word;
}

Plain HTML

Use percentage and viewport-relative widths instead of fixed pixel widths.

<style>
  /* Mobile-first: everything starts as single column */
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* Images must never exceed their container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Flexbox wrapping: items flow to next line when space runs out */
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .card {
    flex: 1 1 300px; /* grow, shrink, minimum 300px before wrapping */
    max-width: 100%;
  }

  /* Tables: make them scrollable on mobile instead of overflowing */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>

<div class="container">
  <div class="card-grid">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
  </div>
</div>

Quick checklist for responsive design:

Never use fixed pixel widths on containers
Use max-width: 100% on all images and media
Test at 320px, 375px, 768px, and 1024px at minimum
Use CSS Grid or Flexbox with wrapping, not float-based layouts
Wrap data tables in a horizontally scrollable container

High impact — mobile~2 paws

A layout that breaks on mobile is not a layout problem — it is a business problem. The cat expects your site to fit every screen like a cat fits every box.

How the cat scores this

The scanner renders your page at multiple viewport widths (320px, 375px, 390px, 768px) and checks for horizontal overflow — any content wider than the viewport is flagged. It also detects elements with fixed pixel widths greater than the viewport, overlapping interactive elements, and text that gets clipped or hidden at smaller sizes. The penalty scales with how many elements overflow and how badly they break the layout.