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


#1

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">
  </div>
  <!-- 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>
           <div class="four wide column large screen only">
          </div>
        </div>
     </div>
 </div>    
  </div>
</body>

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.


#2

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?