Why is my main content column width stuck at 1046px on small devices?


I am working on a website for a non-profit researcher community. I based my layout on the homepage example.

The main layout is pretty simple:

<body class="pushable">
  <div class="ui vertical inverted sidebar menu">
  <!-- Page Contents -->
  <div class="pusher">
     <div class="ui vertical stripe segment">
        <div class="ui stackable grid container">
          <div class="row">
            <div class="twelve wide column" id="main">
             <!-- this is the oversized column -->
           <div class="four wide column large screen only">

At the 770px width breakpoint and smaller, the twelve wide column width default to 1046 px. Since the overflow-x of the pusher is hidden, this is quite an issue.

What am I missing? It seems like the exact same layout than the example.


Ok, I got lucky: I needed to add a min-width:320px; to body and everything works fine. No idea why it was necessary tho. Should I open an issue on github?