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

    tables pulling apart when I resize my window?

    jasonalexandersleftnut

      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?
          Ben Pleysier CommunityMVP

          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.

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

            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.

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

              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. CommunityMVP

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

                 

                 

                Nancy O.