4 Replies Latest reply: May 1, 2013 10:46 AM by Nancy O. RSS

    tables pulling apart when I resize my window?


      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?

        • 1. Re: tables pulling apart when I resize my window?
          BenPleysier CommunityModerator

          This is what I see full screen


          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.

          • 2. Re: tables pulling apart when I resize my window?
            Nancy O. ACP/MVP

            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.


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



            Hope this helps.



            Nancy O.

            • 3. Re: tables pulling apart when I resize my window?
              osgood_ MVP

              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.

              • 4. Re: tables pulling apart when I resize my window?
                Nancy O. ACP/MVP

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



                Nancy O.