Glitches

How to fix visual/UI glitches, flickering, wrong styling, and layout breaks.

What Are Glitches?

Glitches are visual problems that do not crash the app but make it look wrong:

  • Buttons in the wrong place
  • Text overlapping other elements
  • Layout breaking on mobile screens
  • Content flickering on page load
  • Wrong colors or missing styling
  • Elements "jumping" around during load

Describing Visual Problems to Claude

Since glitches are visual, you need to describe them precisely:

  • What element is affected (button, header, card, form)
  • Where it appears on the page
  • What it looks like vs. what it should look like
  • Screen size — does it happen on desktop, mobile, or both?
Report a layout problem
Claude prompt
my-app-name: The navigation bar overlaps with the page content on mobile screens. On desktop (wide screen) it looks fine, but on mobile (narrow screen) the nav bar covers the top of the content. Can you fix the responsive layout so the content starts below the navigation on mobile?

Common Glitch Types

Layout Breaks on Mobile

The most common glitch. The app looks fine on desktop but elements overlap, become too small, or break on mobile screens.

Fix responsive design
Claude prompt
my-app-name: The card grid looks good on desktop (3 columns) but on mobile the cards are too small and text is unreadable. Can you adjust the responsive layout so cards stack vertically on mobile (1 column) and show 3 columns on desktop?

Content Flickering

The page briefly shows one thing, then switches to another. This is often caused by loading states or hydration mismatches.

Fix content flickering
Claude prompt
my-app-name: The dashboard page flickers when it first loads. I see the old content briefly, then it disappears and the new content appears. This might be a loading state or hydration issue. Can you investigate and fix the flicker?

Elements Jumping During Load

Elements shift position as the page loads, causing a jarring experience.

Fix layout shift
Claude prompt
my-app-name: When the page loads, elements jump around before settling into their final positions. The header loads first, then the content pushes everything down. Can you fix this layout shift so the page loads smoothly without elements jumping?

How to Test on Mobile

You do not need a phone — Chrome DevTools can simulate mobile screens:

Simulate mobile viewport in Chrometext
1. Open Chrome DevTools (F12 or Cmd+Option+I)
2. Click the device toolbar icon (or Ctrl/Cmd + Shift + M)
3. Select a device from the dropdown (e.g., iPhone 14)
4. Reload the page to see the mobile view

CSS and Tailwind Debugging

This project uses Tailwind CSS for styling. Responsive breakpoints use prefixes:

PrefixScreen Size
(none)Mobile first (default)
sm:640px and up
md:768px and up
lg:1024px and up

If something looks wrong on mobile, it is likely missing a responsive class.

Quiz

Quiz

Your app looks perfect on desktop but the layout breaks on mobile. What is the most likely cause?