5 Replies Latest reply on Oct 23, 2014 6:04 PM by cellopoet

    change the percentages and number of columns after the document has been created

    DWQuest

      I am using Dreamweaver cs6 to create a fluid layout. When the new document option window first opens it gives you options on the percentages and number of columns for each device. I have done this, but would like to change the percentages and number of columns after the document has been created. Is there a way to change the percentages and column numbers of a fluid layout in Dreamweaver cs6 after the document has been created?

        • 1. Re: change the percentages and number of columns after the document has been created
          Nancy OShea Adobe Community Professional & MVP

          It's easier to start over with a new Fluid Grid Layout.

           

           

          Nancy O.

          • 2. Re: change the percentages and number of columns after the document has been created
            DWQuest Level 1

            Thanks Nancy... I really just need to change the % width of the desktop version (not the columns). I may want to keep changing it until it looks good with the background. Is it possible to start a new page with the desired % and then copy and paste it into the finished page?

            • 3. Re: change the percentages and number of columns after the document has been created
              Nancy OShea Adobe Community Professional & MVP

              Editing widths in one place and not others can open a can of worms.  Make a backup of your FluidGrid.css in case you mess the whole thing up.

               

               

              Good luck!

              Nancy O.

              • 4. Re: change the percentages and number of columns after the document has been created
                sudarshan.t Level 6

                DWQuest,

                 

                Ideally, changing the width once you create your document in FGL is not advisable. But, is definitely possible.

                 

                When you created the Fluid Grid, you'd have been prompted to save a .CSS file (default filename Untitled-xxx.css). Open up that file. The rule you'd be changing is

                 

                .gridContainer


                You'll find 3 instances of this rule:

                 

                • Mobile layout - below 480px width
                • Tablet layout - 481-768px width
                • Desktop layout - above 769px width

                 

                3 values there that you'll change:

                 

                • width
                • padding-left
                • padding-right

                 

                Even though the default screen would have a round number of 91% or 93%, DW calculates padding-left and right as integer values based on total width. So, ideally the 3 values above should total up to the one main round integer. By default, it is 91%, 93% & 90%. In .gridContainer, the default values for mobile layout are:

                 

                   

                width: 87.36%;

                padding-left: 1.82%;

                padding-right: 1.82%;

                 

                Notice the 3 values totalling to 91%. Likewise, for the other 2 media-queries (tablet & desktop) as well.

                 

                Change these values carefully as, otherwise, you'd mess up the entire layout! Like Nancy said, backup this .CSS file before changing it, just in case.

                 

                -ST

                1 person found this helpful
                • 5. Re: change the percentages and number of columns after the document has been created
                  cellopoet Level 1

                  I am trying to do the same thing, mainly to change the mobile setting to 100% so that I have more room to work with on the mobile layout.  My problem is, however, that there is no .gridContainer rule.  I looked in both boilerplate.css and main.css (the one I was asked to create).  Those are the only two css files I have.  Should I create the .gridContainer rule?  If so, would I create it in boilerplate.css or main.css?  But creating the rule seems like a bad idea to me.  It seems that the values should be there somewhere, so I should be able to just edit them.

                   

                  Any suggestions?

                   

                  ---------UPDATE----------

                  I figured out the problem.  I did something wrong in the beginning and I ended up with two css files in two different folders.  I had somehow created a second css file that I was using instead of the original one (which I had moved to another folder, and which has the .gridContainer rule). 

                   

                  I think it's easier at this point for me to start over since I have been editing the wrong css file this whole time!  No wonder I was having so many problems!

                  1 person found this helpful