Hi everyone.

While I have quite some experience in website building, I don't have too much experience with Bootstrap and responsive web design (anyway "client" is a friend and he's designing graphic of the website by himself), just a handful of websites done, all learning Bootstrap "on the way"

Anyway, current design is very simple: apart a few pages with text and infos, the majority of the website will be a number of pages all the same, one for each work, with menu on top, a big slideshow of images (I'm using Bootstrap Carousel) and a menu with thumbnails of all the works on the right.

Test here: http://gabbi.altervista.org/test/
Please note that the thumbs on the right are NOT related with the Carousel: they will link to the pages for each work. All similar to the one you're previewing.

Now my troubles:

1) client asked that everything stays in the window (@1280x800), so I've put a fixed height to the divs containing carousel and thumbnails, but I suspect forcing sizes around is not the best way to make a responsive website.
I would like to avoid requiring the client to prep images all of same size and aspect ratio. Thee is a way to set Carousel so it takes mak width and height available and resize/crop images as needed?

2) having reduced the height of the div containing Carousel, now the "navigation dots" aren't properly displayed (below the current visible portion, I suppose).

3) apart from giving them fixed heights, how could I make the thumbs col same height of the Carousel col on the left?


I know, lots of questions, excuse me ^^;