Responsive Tech Blogs: Code Blocks That Don’t Break Mobile Layout

Responsive Tech Blogs: Code Blocks That Don’t Break Mobile Layout

Long code lines can destroy mobile readability if your content area forces full-page overflow. The trick is to isolate horizontal scroll inside code blocks while preserving readable typography.

Step 1: constrain pre blocks, not the whole article

article pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 0.9rem;
  border-radius: 10px;
}

Step 2: preserve whitespace and avoid hard wraps in code

article pre code {
  white-space: pre;
  word-break: normal;
  tab-size: 2;
}

Step 3: add touch-friendly scroll affordance

article pre {
  -webkit-overflow-scrolling: touch;
}

Pitfall

Applying word-break: break-all globally. It destroys code semantics and readability.

Verification

• Mobile page width remains fixed with no full-page horizontal scroll.
• Code blocks scroll smoothly on touch devices.
• Desktop rendering stays unchanged.