This concept is never going to work. Your images are grossly oversized & too huge for optimal viewing in average displays:
320 - 480px = Mobile
481-768px = Tablet portrait
768-1024px = Tablet landscape
1024-1232px = Desktops/Laptops.
One image alone is 3600px wide which is about 3.5 times bigger than the average desktop and more than 10 times larger than a smartphone.
Also Table layouts invariably fall apart in Fluid Grid Layouts. It's better if you don't use them.
- Scale images down to something reasonable in your graphics editor. Total image size should be less than 900px wide. On the web, less is more. Smaller file size = faster page load.
- Build a responsive layout for Mobile first. That's what everything else is based on. Then arrange your tablet layout and finally your Desktop layout.
Below is a working example of this Layout. If you resize your viewport, the divs move and images re-size.
Hope this helps.
I looked at this much earlier and just saw a black screen. I then started scrolling about all over the place to find the content and then gave up. I wasn't really sure what positive advice to provide to be honest, other than a major re-think.
Agreed. I had to agressively Zoom out in Firefox to make any sense of it. Even then it didn't work.