Images won't resize below certain browser's width

Question

Website is available here. Full CSS can be accessed here.

Problem is that images in tiles resize only for browser's width > 512px. For 2 images per row images won't shrink below 240px and for 1 image per row images keep their default width - 480px. It happens despite setting:

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
}

I'm using Bootstrap's tiles-row class (v. 2.3.2) and following media-queries for changing number of tiles per row:

@4-per-row: 100% / 4;
@2-per-row: 100% / 2;
@1-per-row: 100% / 1;

(...)

@media (min-width: 768px) { 
  body {
    .tiles-row {
      figure {
        width: @4-per-row;
      }
    }
  }
}


@media (max-width: 767px) {    
 body {
  .tiles-row {
    figure {
      width: @2-per-row;
    }
  }
}

/* below img's default width */
@media (max-width: 480px) { 
  body {
    .tiles-row {
      figure {
        width: @1-per-row;
      }
    }
  }
}

Answer 1

It looks to me like the problem is caused by the rule for body starting at line 1 of http://vanfolmert.com/opta_single/css/default.css

Try commenting out or rethinking the min-width

body {
    background-color: #273B42;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 61px;
    /* min-width: 480px; */
    font-family: 'Open Sans', cursive, sans-serif;
    font-size: 14px;
}  

Hope this helps!