Fluid Layout (Twitter Bootstrap)

Question

I am in the process of creating a site that i would like to be responsive. I am using Twitter bootstrap to assist with this. I have managed to get the majority of it working but a few elements within the site are not playing ball. Now maybe im just missing the obvious but would appreciate it if someone could point out where I have gone wrong so that 1) i can correct the issues and 2) learn from my mistakes.

The site is at http://growing-mist-5023.herokuapp.com/ and the part im trying to fix is the polaroids across the center of the page under the slider. All constructive criticism welcomed as I am trying to learn ( albeit from my mistakes) and any suggestions welcome

Thanks

Answer 1

you can replace <div class="row"> with <div class="row-fluid"> in the 2nd level parent of your .polaroid

I don't think you can keep the same layout under 768px (picture below with 480px)

I would recommend you to use another class on the top of the .span3 and use media queries to overide the behaviour of the .span3 under 768 to create a centered 2x2.