fluid layout not responsive?

[titaniumbones]

Hi,

I'm having trouble getting nested fluid layouts to display properly on iphone/ipad; in particular, adjacent span6's overlap, rather than stack. I have a minimal example file here:

file:///home/matt/boulderzcomp/index-minimal.html

I'm not sure if I'm missing something crucial and obvious? Thanks, Matt

[mdo]

We can't see that example file as it's a local file on your computer. Fluid is responsive, so perhaps the problem is the number of columns you're using. Can you share a linked public example or a jsfiddle?

[titaniumbones]

sorry, wrong link. Here's the public version: file:///home/matt/boulderzcomp/index-minimal.html thank you!

[mindctrl]

Any link starting with file:// is not a public link. It should be on a public web server like http://www.yoursite.com

[titaniumbones]

sorry, I'm not really quite as much of an idiot as this makes me seem -- just careless with copy/paste:

http://sandbox.hackinghistory.ca/boulderzcomp/index-minimal.html

that, finally, is correct. I should note I guess that it displays fine on my desktop (firefox or chrome, running ubuntu; also a firend's mac, under safari). I have 2 span6s inside a row-fluid, and they overlap rather than stack or make space for each other. happens on the ipad too, which I would think ought to have room for the display. thx again.

[mindctrl]

Looks like you got it figured out. BTW, if you move the navbar outside of that <div class="container-fluid"> it will extend all the way to the edges.

[titaniumbones]

ah, the container has gutters -- wasn't thinking clearly. But is the responsive display realy looking on the iphone I have access to right now the display is still lousy (don't know how to take a screenshot! I'm a linux person). I expected it to look more like examples/fluid.html -- with each span element displayed sequentially. Instead, the two span6 elements are overlapping each other in the same vertical row. Are you seeing something different?

[mindctrl]

You need to ditch the fluid grid. Without the fluid grid it works as expected. Note the docs mention this: With the static (non-fluid) grid system in Bootstrap, nesting is easy.

Also, your tables are too wide to fit side by side within a span8, so when you ditch the fluid grid they stack. If you ditch the sidebars and go to a span12 for the table data, the tables are displayed side by side and collapse like they should on responsive.

Try this code to see what I mean.

<div class="navbar">
  <div class="navbar-inner">
    <h1>Boulderz IFSC Comp Rankings</h1>
  </div><!-- .navbar-inner -->
</div>  <!-- .navbar -->

<div class="container">    
  <div class="row">
    <div class="span12">
      <div class="row">
        <ul class="nav nav-pills"><li class="active"><a href="index.html">Full Results</a></li></ul>
      </div> <!-- internal row -->

  <div class="row">
    <h2 style="text-align:center;">Youth D Results</h2>
  </div> <!-- internal row -->

  <div class="row">
    <div class="span6 inner-span"><h2> Boys </h2>
      <table class="table table-bordered boys">
      <thead>
      <tr><th>Rank</th><th>First Name</th><th>Last Name</th><th>Tops</th></tr>
      </thead>
      </table>
    </div> <!-- internal span6 -->

    <div class="span6 inner-span">
      <h2> Girls </h2>
      <table class="table table-bordered girls">
      <thead>
      <tr><th>Rank</th><th>First Name</th><th>Last Name</th><th>Tops</th></tr>
      </thead>
      </table>
    </div>  <!-- internal span6  -->
  </div> <!-- internal row -->

  </div><!-- .span12 -->
  </div> <!-- external row -->
  </div> <!-- container -->

[mdo]

The problem isn't the fluid grid—that does support nesting—but with the amount of content in those tables. It just doesn't work at those sizes when bumping down the media queries.