Skip navigation
jasonalexandersleftnut
Currently Being Moderated

tables pulling apart when I resize my window?

May 1, 2013 6:18 AM

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:

 

The facts:

 

  1. sliced up my layout into simple image blocks, layed them out with a table
  2. inserted table in a fluid DIV

 

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?

 
Replies
  • Currently Being Moderated
    May 1, 2013 9:54 AM   in reply to jasonalexandersleftnut

    This is what I see full screen

    _Capture.jpg

    Start by removing the apDiv1 and the table. After that modify the image to a managable size and use the 'alt' atribute so that you have some content on the page that can be read by screen readers and web spiders.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:24 AM   in reply to jasonalexandersleftnut

    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.
      See Screenshot.

    CS6FluidGrid.jpg

    Below is a working example of this Layout.  If you resize your viewport, the divs move and images re-size.

    http://alt-web.com/FluidGrid/Fluid2.html

     

    Hope this helps.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:32 AM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:46 AM   in reply to osgood_

    Agreed. I had to agressively Zoom out in Firefox to make any sense of it.  Even then it didn't work. 

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points