XY Grid Breakpoints Ignored on Mobile?

I am having trouble getting my columns in the XY grid to respond to smaller windows. On desktop, it looks fine, I resize my window the columns stack like you would expect in responsive design. For some reason, on mobile, it just keeps shrinking and shrinking. I thought it might be some other module interfering, but I reduced my current project to the absolute bare basics and it still behaves this way.

This can't be normal since I see the Foundation templates behaving as one would expect. I am new to Foundation, so I'm hoping I'm just missing something incredibly simple.

Codepen: https://codepen.io/anon/pen/jXOJLQ If you resize a desktop browser to below 640px width it works as expected. But if you use a mobile phone (or go with Chrome's mobile view), it just keeps shrinking proportionally, never letting go of the two-column layout.

$(document).foundation();

<head>
  <!-- Import Foundation, Foundation MotionUI and KaTeX Stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
    integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA=="
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css" />

  <!-- Import jQuery, Foundation, KaTeX and KaTeX Auto-Render -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
    crossorigin="anonymous"></script>

</head>


<body>
  <article class='grid-container'>
    <div id='content' class="grid-x grid-margin-x">
      <div class="medium-6 cell">
        <div class='card'>
          <div class='card-divider'>
            Column 1
          </div>
          <div class='card-section' style='z-index:10;'>
            Hello world!
          </div>
        </div>
      </div>

      <div class="medium-6 cell">
        <div class="card">
          <div class='card-divider'>Column 2</div>
          <div class="card-section">
            Hello world!
          </div>
        </div>
      </div>
    </div>
  </article>
</body>

Solution

Make sure you are not missing the viewport meta tag in your head.

<meta name="viewport" content="width=device-width, initial-scale=1">