4 Replies Latest reply: Apr 1, 2013 10:19 AM by cSegno RSS

    Fluid grid layout: cannot make it work

    cSegno Community Member

      Hello,

      I'm quite new to html5 css and Dreamweaver, though I have some programming backgroung.

      Could you please give any hint on how to solve the problem I'm encountering when trying to build my very first web site?

      I have found similar problems described in Adobe Community, but none of the solutions seemed to solve my case.

      If this has actually already been addressed, please point me to the proper article (I'm willing to learn rather than simply get the ready made fix).

      Well, this is my problem:

      I need to create a web site that displays pics and text in three separate areas of the screen, three columns.

      I have followed the tutorial at http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/  (very well done btw), and tried to repeat it myself.

      No way to make it works for me :-(

      All the divs appear each in a new row when opening on a browser, not aligned as I expected (tried all of them: ie, firefox, chrome and safari on ipad).

      If I do multiscreen prevew in Dreamweaver it looks good instead.

      I would really appreciate any suggestion or explanation why this is happening.

       

      Thanks a lot!

      Cristiano P.

       

      All files I can provide are at:

      www.csegno.com.ar/Post_Debug/debug_data.html

       

       

      1. index.html file created by dreamweaver (www.csegno.com.ar/Post_Debug/index.html)
      2. boilerplate.css file created by dreamweaver
      3. cSegno.css file created by dreamweaver
      4. respond.min.js file created by dreamweaver
      5. DW_GUI.png screenshot of what it looks like in Design view
      6. DW_multiscreen.png screen shot of multiscreen preview
        • 1. Re: Fluid grid layout: cannot make it work
          Nancy O. CommunityMVP

          I cannot connect to your server.  It just keeps timing out.   I'll attempt  to answer your questions without seeing your code. 

           

          #1 FluidGrid Layouts are challenging even for experienced web designers.  If you've never built a site before, maybe this is not an ideal first project to learn from. 

           

          #2 FGL requires that you design the mobile layout first as this is what everything else is based on.  Then build tablet layout followed by desktop.  This example page was built with FGL. View source to the see the code.   http://alt-web.com/FluidGrid/Fluid2.html

              

          #3 Use a separate external style sheet for your content styles.  Keep FluidGrid.css for layout only.  Don't tamper with FluidGrid.css or boilerplate.css code unless you're very experienced with CSS code.

           

          #4  Media queries contain an extra set of curly brackets { }   If you remove them, your layout will break.

              

               /* Special Rules for Mobiles. */

               @media only screen and (max-width: 480px) {

                   body { font-size: 75% }

               }

           

          #5  Validate your code with this online tool and fix any reported errors.

                    HTML - http://validator.w3.org/

           

          Hope this helps.

           

          Nancy O.

          • 2. Re: Fluid grid layout: cannot make it work
            cSegno Community Member

            Hello Nancy,

             

            Thanks for your reply, especially in this holyday time.

            I will follow your advices ans will let you know.

            My very first feedback follows anyway:

             

            1. I had mispelled the page name with the data, it's actually the following (I had mipelled the capitalization) http://www.csegno.com.ar/Post_Debug/Debug_Data.html
            2. I tried a brand new site defining mobile layout first, tablet second and desktop third... with the same results.

             

            I noticed that, even if does not diplays the content in columns as I expected, yes it resizes dynamicaly when I resize the browser windows.

             

            I'll check your other advices and will keep you posted.

            Happy Easter in the meantime.

             

            Cristiano P.

            • 3. Re: Fluid grid layout: cannot make it work
              Nancy O. CommunityMVP

              Are you working within a Defined Local Site folder?  Site > Manage Sites > New...  This is a critical 1st step so DW can manage your project files correctly.

               

              Happy Easter!

               

              ()__()

              (='.'=)

              (")_(")

               

              Nancy O.

              • 4. Re: Fluid grid layout: cannot make it work
                cSegno Community Member

                Thanks a lot Nancy.

                That was the point.

                I have cleaned everythig, and started from scratch by creating a brand new site.

                Now it works!

                Cheers,

                Cristiano