Diagnosing Foundation Grid Breakpoints: A Step‑by‑Step Guide

Problem Statement

When you resize the browser, the ZURB Foundation grid should reflow columns according to the defined breakpoint classes. If columns collapse, stack incorrectly, or shift unexpectedly, the layout is “broken” at that breakpoint. This guide helps you pinpoint why that happens and how to fix it.

Common Causes

• Missing or mismatched Foundation CSS imports.
• Using outdated breakpoint class syntax.
• Creating nested rows without wrapping columns.
• Custom CSS with higher specificity overriding Foundation flex rules.

Diagnostic Table

Symptom	Likely Cause
All columns stack on every breakpoint.	Missing foundation.css or foundation.min.css
Columns only work on large screens.	Legacy breakpoint classes (e.g., .small-3) mis‑used with Foundation 6+
Row gaps disappear or columns collapse.	Nested row without an intermediate column.
Columns look correct but custom styles override widths.	Overly specific selectors in custom CSS.

Step‑by‑Step Checks

1. Verify CSS Imports
   • Open the page in a browser and view the Network tab.
   • Confirm that foundation.css or foundation.min.css loads with a 200 status.
   • Check the <link> tag’s href path for typos or version mismatches.
2. Inspect Breakpoint Classes
   • In DevTools, select a column element and examine its class list.
   • Ensure the syntax matches Foundation 6+: .small-3, .medium-6, .large-4.
   • Legacy 4‑column syntax (e.g., .small-3 used in Foundation 5) will not work.
3. Check Row/Column Nesting
   • Locate any <div class="row"> that directly contains another .row without an intermediate .column.
   • Wrap nested rows inside a .column or remove the extra row.
4. Assess CSS Specificity
   • Search for selectors that target rows or columns with IDs or very specific class chains (e.g., #main .row).
   • Temporarily comment out custom CSS files and reload the page.
   • If the grid returns to expected behavior, the conflict is in the custom CSS.

Fixes Tied to Findings

• Missing CSS – Add a correct <link> tag pointing to the Foundation CSS file. Example:

  <link rel="stylesheet" href="/css/foundation.min.css">

• Incorrect Breakpoint Syntax – Replace legacy classes with the current syntax. Example:

  <div class="column small-3 medium-6 large-4">Content</div>

• Nested Row Without Column – Wrap the inner row:

  <div class="row">
    <div class="column small-12">
      <div class="row">…</div>
    </div>
  </div>

• Specificity Conflict – Reduce selector specificity or use !important sparingly. Prefer adding a new class with lower specificity and overriding only the needed property.

Escalation Criteria

• After applying all fixes, the grid still behaves inconsistently across breakpoints.
• You discover a 404 error for the Foundation CSS that cannot be resolved by adjusting paths.
• Custom themes or SASS overrides are deeply integrated, and the source is not available for inspection.

In these cases, contact the project’s front‑end team or consult the Foundation support community for deeper analysis.

Verification Checklist

• Open the page at each breakpoint (small, medium, large) and confirm columns align as expected.
• Use DevTools to confirm that the .small-3, .medium-6, etc., classes are present and not overridden.
• Check the console for any CSS warnings or errors indicating missing files.

Concrete Example

Suppose you have the following markup that breaks on medium screens:

<div class="row">
  <div class="small-3 medium-3">Box 1</div>
  <div class="small-3 medium-3">Box 2</div>
  <div class="small-3 medium-3">Box 3</div>
  <div class="small-3 medium-3">Box 4</div>
</div>

In Foundation 6+, the correct syntax is .small-3 and .medium-3 – but the class .small-3 medium-3 is fine. The issue often is that the foundation.css is missing. After adding the correct CSS link as shown above, the grid behaves correctly across all breakpoints.