title: screen rotation and responsiveness with bootstrap
body: <p>I am using bootstrap to display some thumbnails in a div. The thumbnails are actually canvas because I need to create lighter thumbnails client-side.</p>
  
  <p>It actually isn't perfect design (I am more a developer than a designer) but it works pretty well.</p>
  
  <p>However I wonder about the following: when I look at the app with a mobile, in portrait mode, then I get the col-xs-6 class, and the screen looks fine. But when I rotate the screen, it appears I still get the col-xs-6 and its associated pixel size - which looks pretty ugly - screenshots:</p>
  
  <p>rotated screen:
  <a href="http://imgur.com/cNTGWy0" rel="nofollow">http://imgur.com/cNTGWy0</a></p>
  
  <p>normal screen:
  <a href="http://imgur.com/ZHlwq42" rel="nofollow">http://imgur.com/ZHlwq42</a></p>
  
  <p>Is this a bug on the phone, or on the phone's browser (using Galaxy S3)- or is my code wrong? Shouldn't rotating the browser give a different resolution? Should I just ignore this issue, as maybe there's no elegant solution?
  This is the HTML:</p>
  
  <pre><code>&lt;div id="upload-list"&gt;
     &lt;!-- for each image --&gt;
     &lt;div class="col-xs-6 col-sm-3 col-md-3"&gt;
       &lt;div class="thumbnail"&gt;
         &lt;div class="caption"&gt;IMG_0004.JPG&lt;i&gt;&lt;br&gt;6.14 MB&lt;/i&gt;&lt;/div&gt;
         &lt;div style="display: none;" class="abort_upload working"&gt;
           &lt;span class="alert-warning glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;!-- This is for upload progress display --&gt;
         &lt;div class="knob-outer"&gt;
            &lt;div class="knob-progress"&gt;
              &lt;div style="display:inline;width:64px;height:64px;"&gt;
                &lt;canvas height="64" width="64"&gt;&lt;/canvas&gt;
                &lt;input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text"&gt;
             &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;!-- the actual canvas with the image, is being generated client-side after file selection --&gt;
         &lt;canvas class="canvas-thumbnail" height="518" width="691"&gt;&lt;/canvas&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>@media (min-width: $screen-xs-min) {
    .thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
    .knob-progress {width: 64px; height: 64px}
  }
  $screen-xs:                  420px !default;
  $screen-xs-min:              $screen-xs !default;
  </code></pre>
  
  <p>EDIT: other screen size css</p>
  
  <pre><code>$screen-sm:                  768px !default;
  $screen-sm-min:              $screen-sm !default;
  
  $screen-md:                  992px !default;
  $screen-md-min:              $screen-md !default;
  
  @media (min-width: $screen-sm-min) {
    .thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
  }
  
  @media (min-width: $screen-md-min) {
    .thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
  }
  </code></pre>