Question

Can somebody help me getting a “Responsive Thumbnail Modal Box” to work ?

Code so far:

http://jsfiddle.net/YCcNY/1/

It should have:

• 2 rows, with 5 pics each

• dynamic height:auto

• width : 75% of the screen

• always stay in the absolute center of the screen

• keep the aspect ratio when resizing (responsive)

I would appreciate a css only way of doing it, but jquery would also be fine.

Answer 1

Made a few quick changes to the basic structure to get you started on the right track.

Code:

http://jsfiddle.net/purplenurple/YCcNY/29/

There was a lot of unnecessary CSS. Always be careful not to over complicate things. CSS is like that sometimes, you think you need to add something to fix the problem but really you need to remove the issue that wasn’t originally apparent.

Note: It will be impossible to center it vertically without JavaScript as neither the modal box nor its container have a fixed height. You will have to get the height via a script and set the position of the box accordingly.

I haven’t implemented any JavaScript for you as the purpose of StackOverflow is not to outsource your work but to help you find a solution on your own 🙂

Hope this helps you get back on track anyway.