Hey guys, I'm new, please bare with me! I've searched the forums for the last few hours and haven't really found anything that'll help me so I figured I'd start a new topic:
Looks fine full screen, but when I drag the edge of my browser window smaller and smaller (trying to emulate a mobile device's screen size), my tables seem to pull apart vertically but not horizontally.
page in question: http://djnatural.phpwebhosting.com/jam1photo/test2/
anyone have any insight as to keep them from seperating?
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.
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.