Responsive design: How to resize images/background images and align divs vertically?

Question

I am experimenting with responsive design. My images are not currently resizing. In my markup, I also have background images applied to certain divs which needs to be resized.

Here is the HTML view: http://jsbin.com/emojeg/2

See the code here: http://jsbin.com/emojeg/2/edit

For screen width between 800px and 1100px, I'd like to resize the images. For anything below 800px, I'd like to align the picture frames vertically - 1 or 2 per row whatever the screen width permits.

Currently when I resize the browser to the narrower width, up to 2 of the frames wrap to the next row but if I keep resizing further, the picture frame's background seems to cut off and some of the images seem to disappear. Not sure how to fix this.

Answer 1

It's because that slider you're using has loads of absolute positioning and fixed widths/heights. I'd recommend using something that is actually responsive, like Flexslider (http://www.woothemes.com/flexslider/)

But if you don't want to do that, you can remove the position:relative and the fixed height from the .mrpv_container class --

.mrpv_container {
    width: 100%;
    height: 710px;
    position: relative;
    overflow: hidden;
}

The rest of the CSS would probably have to be cleaned up also, but does that give the desired effect?