Lost fluid grid layout

I use dreamweaver cc
I opened and created a page, that worked fine in fluid grid layout.
I then quit out of dreamweaver, then came back to the same page later.
Now when i open that page in dreamweaver cc, i no longer see it with the fluid grid layout or with the fluid grid handles on any of the divs.
I also no longer have the little button in the toolbar next to live button either.... to toggle the fluid layout on and off.
I did see one solution which says to go to view/ visual aids/ display fluid grid layouts
but this does not seem to be available in dreamweaver cc... only dreamweaver cs6.
I have the latest version of dreamweaver cc, and have set up the page correctly.
Thanks in advance to anyone that takes the time to help.

Hi Nancy,
My operating system is Windows 7, run at our health corporation, (so I can't upgrade to Windows 8 or 8.1.)
Im running Adobe Dreamweaver Creative Cloud built 6733 - the latest version as of today.
The problem I have been experiencing match up with those of many other users over the last 2 years.  There's quite a few posts reporting the same type of thing that I am.  Basically it's to do with the Fluid layout controls and the icon on the toolbar that first appears once you've created a new webpage controlled by the fluid layout stylesheet.  These are first there, but after restarting DW they are gone.
i.e.
I create an HTML5 webpage saved as 'default.asp'  and a fluid grid stylesheet named fg-styles.css.
The Fluid Grid layout controls are all there.  (I am doing nothing else, no injection of code nothing.)
Then I close Dreamweaver
On reopening of Dreamweaver and all files, when looking at the default.asp file in Design view, the fluid grid hide/show icon on the toolbar and the fluid grid controls when clicking inside the fluid div no longer show.
I get this every single time, even after rebooting my computer.
The controls also strangely disappear during a session when I am adding new blocks within the fluid grid panel.
I am so close now from discontinuing using this tool and looking elsewhere for fluid grid solutions.
It seems such a powerful tool, but what use is it if it is unstable.  Really, DW should not roll out such tools until they have been proven to work reliably.
Also documentation should be provided that makes clear when this tool cannot be used reliably and workaround solutions.
I have now spent a solid 10 hours on this, and created countless versions of the same page.
Admittedly at one stage I discovered that when adding the classic ASP line above my HTML5 code that this would not work after Dreamweaver saved my document as an .asp file, but even .html files still experience all kinds of bugs with this tool.
I hope this kinda explained what problems I am facing.
Thanks again for your time.
I will now move on to other fluid grid solutions, but am happy to re-look at the DW tool if there is a sure-fire way that fixes my problems.
Andreas

Similar Messages

  • Fluid grid layout lost when closing and reopening Dreamweaver

    I am working on fluid grid layout in dreamweaver cc. I created a new dreamweaver site, created a fluid grid layout page and everything looked and worked as it should. I closed out of dreamweaver and when I reopened it, I could no longer see the fluid grid layout or the fluid grid handles on any of the divs. I also no longer had the little button in the toolbar next to the live button either, to toggle the fluid layout on and off.   I did not move the css or js from where dreamweaver originally stored them.
    Also checked the content and code of my files, everything looks as it should:
    The fluid grid layout style sheet IS attached to the page.
    The Fluid Grid Properties near the top of the style sheet ARE still there.
    I have tried several test sites and as soon as I close DW and reopen it, the fluid grid layout button is gone, as is are the visual aids.  I uninstalled and reinstalled dreamweaver to no avail.
    Very frustrating!
    ANY help would be greatly appreciated!

    Hi,
    Thank you for all the responses.  When I was doing the testing, I didn't touch any of the style sheets.  I just created a new site, created a new FGL page, saved everything, then closed out.  When I reopened, the FGL elements were not there.  So in taking Ken's suggestion, I was getting ready to upload the files to see if anyone could see what I was doing wrong.  I had named the file test.html so I did a 'save as', to save it as index.html to make it easier.  Then a strange thing happened.  The new 'index.html' page came in with the FGL elements!  When I looked at the test.html, they still were not there.  In doing additional testing, when I open the first file, whether test.html or index.html, no FGL functions are available, when I open the second one, again no matter whether test.html or index.html, they are.  Getting ready to throw my hands up...  I uploaded everything to:
    http://www.ComputerSecurity.com/fgltest/
    Directly under there is the css file called fgltest.css, along with the boilerplate.css, respond.min.js, index,html, and test.html.
    Don't know what is going on. I am new to fluid grid layouts, but not to dreamweaver, have been using it for years.  Unless someone can see something that I cannot, seems like the only way I can create a Fluid grid layout based on this new information, is to open one page and work on another...

  • DW6 fluid grid layout issue: writes to page instead of css file

    Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit.
    Following tutorials and the help files to use the fluid grid layout.
    Start a blank page on a new site, which inserts the starter div and new css file
    Immediately save page, which also generates/saves ancillary files (js and css).
    Remove inner div that's created in order to use my own (have also tried leaving the default one in place and using that)
    Insert new div, within the "gridContainer clearfix" div.
    Place cursor just after that new div, still inside "gridContainer clearfix" and add new "fluid grid layout div tag", new row.
    Following same method, do so again.
    Dreamweaver adds the generated CSS code to the actual page instead of the expected div, visibly (minified)....and everything breaks. It does *not* add the code into the CSS file from there on and the only way to have it display the div (which does not show any visual indicators since the CSS is basically lost that would do so, is to CTRL-Z to undo the last step. It undoes the CSS showing as the only content in the HTML file, and *does* show a div with the name I'd given it. If I copy/paste that generated CSS into the fluid css file *then* CTRL-Z, it looks the way it's supposed to, with drag handles, visible indentations and so on.
    If I then change div widths or position, it does record those changes in the CSS file, so it appears this is only when inserting new divs after the second one that's a problem (third div inside the container is when it starts choking; none overlap).
    This is repeatable, on both desktop and laptop, running the same version. I've tried saving after every div insertion, only saving at the start, code view only, split only...
    I've tried searching for someone else having this issue and must not be wording the search properly, can't find anyone else seeing this. It's a weird one.
    If anyone can point me to something to try so the workaround isn't needed, it would be appreciated.

    OK try this workflow.
    Create a new FGLayout and SAVE.  This will save your CSS file with whichever name you give it.
    Switch to Design View.  Click on Mobile Display.  Build your mobile layout first since this is what everything else is based on.
    Insert a few Divs and don't worry about content.  Just get the basic Div structure stacked one on top of the other like this:
    <div class="gridContainer clearfix">
         <div id="div1">
              Div 1
         </div>
          <div id="div2">
              Div 2
         </div>
         <div id="div3">
              Div 3
         </div>
          <div id="div4">
              Div 4
         </div>
    </div>
    Hit Save and name your HTML file.   Do not edit the CSS file.  DW will generate the necessary layout code for you.
    Switch to Tablet Display.
    Grab the right side handles to resize divs and move to row above as desired.
    Save often during development.
    Switch to Desktop Display and repeat.
    Once your layout is built, test media queries by previewing in browsers by resizing viewport
    When you are completely satisfied with your responsive layout, begin adding content and use a separate external style sheet for content styles.  DO NOT EDIT boilerplate or Layout CSS files as doing so could break your layout.
    Nancy O.

  • Full width slider in a fluid grid layout ???

    I'm fairly fluent in Dreamweaver building fixed pixel sites, but cannot seem to grasp fluid grid layouts. At least with what I'm trying to accomplish. mostly all of the tutorials Ive seen dont address anything complicated.
    Question:
    I'm trying to achieve a 100% nivo slider at the top of a page, with a main body area below it that only uses 960px or what ever the equivalent would be as a percentage. How do I do this?
    Initially for testing purposes, I tried to experiment by simply creating two divs. One full screen and one less than that. What I am seeing first is that after creating two divs, and placing color in the divs, when viewed in browser, it does not fill the screen and leaves a small margin on either both side. Looking into the css properties, there's padding in the grid container and the percentage is less than 100%. Why If 100% is selected when setting the new document properties.
    Maybe this is the wrong way to achieve what I'm trying to achieve, but I did attempt to get started here. I'm totally lost here guys and girls. Are there any advanced tuts out there that address this?
    Thanks in advance!
    Bob
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
      <div id="LayoutDiv2">This is the content for Layout Div Tag "LayoutDiv2"</div>
    </div>
    </body>
    </html>
    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 98.5507%;
        max-width: 1232px; (I deleted this)
        padding-left: 0.7246%;
        padding-right: 0.7246%;
        margin: auto;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #LayoutDiv2 {
        clear: both;
        float: left;
        margin-left: 22.549%;
        width: 54.9019%;
        display: block;

    Thanks for the input. I have the slider working now. Placing it before the grid container worked. Also setting the desk top grid to 81-88% answered my other question. That renders the gutters I'm looking for. But I have a question. I asked this above. If I select 100% on the mobile, 100% for tablet, and 88% for desktop, why does DW produce padding in the css files? I keep hearing references to not mess with the css file, and create a new file to perform styling. Can I safely delete this padding and change this percentage to 100%? Confusing to me. If it's mobile first, and all calculations are based on these numbers, then.... Well you understand what I'm saying.
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    So secondly, do we create a separate css file for styling?
    And third, how do you create subsequent pages. Does this work with dwt files?
    Thanks in advance. I will get my head around this soon, I promise.
    B

  • Lost fluid grid columns

    I am experimenting with using Fluid Grid and it is very good.
    However, as I developed the template I have lost the fluid grid columns on screen, so I can no longer move divs around and have them snap.
    At first I thought it was maybe having added margins to some items breaking the size, but I have removed these and the columns have not come back.
    Any suggestions?

    View > Visual Aids > Fluid Grid Layout Guides.
    Or click on the "Eye icon" (see screenshot).
    Nancy O.

  • How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

    Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape.  After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine.  Everything seems to be working just fine on the desktop, ignoring IE.  Could it be my media query tags?
    If anyone knows a solution, it would be much appreciated.  Thanks.
    Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
    Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    @media only screen and (min-width: 481px) {
    @media only screen and (min-width: 769px) {
    Here is most of my media query CSS:
    @charset "UTF-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
              max-width: 100%;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
              width:100%;
    /* Mobile Layout: 480px and below.(smartphone portrait) */
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.5907%;
              padding-right: 0.5907%;
    #header {
              clear: both;
              float: left;
              display: block;
              margin-left: 0%;
              width: 72%;
              max-height: 0%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
              top: auto;
              padding-top: 0.25em;
    #menuHorizontal {
              clear: both;
              float: left;
              width: 118%;
              height:100%;
              margin-left: auto;
              position:relative;
              top:-1em;
              display: block;
    #slides {
              clear: both;
              float: left;
              margin-left: 0.1em;
              width: 119%;
              position: relative;
              top: -1em;
              display: block;
                        /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear: both;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting
                                  slide_container is container size
                                  slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
    .slides_container div {
              clear: both;
              width: 69%;
              display: block;
              /* Mobile Layout: 480px. (smartphone landscape)
                                  Inherits styles from Mobile Layout 480px.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.7907%;
              padding-right: 0.7907%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width:100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              width: 110%;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 68%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              clear:both;
              width:69%;
              display: block;
                        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (min-width: 481px) {
    .gridContainer {
              width: 95.9456%;
              padding-left: 0.5271%;
              padding-right: 0.5271%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width: 100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 70%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              width: 100%;
              display: block;

    I found the problem.  There is a bug in Safari for iPhone 4.  Use code to fix found at http://stackoverflow.com/a/6379407

  • Can I control column color in fluid grid layout?

    The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
    Is there a way to set a preference for grid column color in CC?
    Thanks.

    NO NO NO NO NO!
    Never make your navigation editable or you will shoot
    yourself in the foot
    when it comes time to change a link there and you would have
    to touch every
    page. <sheesh>
    Give each of those links a unique ID, e.g.,
    <a href="page1.html" id="link1">Page 1</a> |
    <a href="page2.html"
    id="link2">Page 2</a>....
    Then in the head of each child page, add this to the Editable
    Region called
    "head" -
    <style type="text/css">
    a#link2 { color:whatever; otherstuff:whatever; }
    </style>
    Now you would just edit the embedded stylesheet to change
    a#link2 to a#link3
    or whichever button you wanted to affect on that page.
    Alternatively, you can go here -
    http://www.divahtml.com and get
    their
    DivaGPS extension.
    DO NOT MAKE YOUR NAVIGATION EDITABLE.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "malcster2" <[email protected]> wrote in
    message
    news:ga5dev$e89$[email protected]..
    > make those links editable regions on the template, and
    apply the
    > neccessary styles in the individual html pages

  • How can I convert my web page from a fixed width layout to a fluid grid layout?

    I'm taking a web design class (I'm using Dreamweaver CS6, btw)  wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered  in the layout) so it shouldn't need excessive tweaking.
    Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
    Did I just answer my own question? Help - I am new at this!!
    Thanks all,
    KC

    Herbert2001 wrote:
    A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
    Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
    //variables
    $desktop: 1025px;
    $large-columns: 12;
    @media only screen and (min-width: $desktop) {
         //regular grid span classes
        @for $i from 1 through $large-columns {
            .span-large-#{$i} {
                width: percentage($i/$large-columns);
         // push classes
        @for $i from 1 through (($large-columns)-1) {
            .push-large-#{$i} {
                margin-left: percentage($i/$large-columns);
    No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like.  I've got  a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
    I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
    Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

  • Problems with fluid grid layout live site only showing phone view in Chrome and Firefox Feb 2015

    Hi all,
    I have done a complex fluid grid layout using DW 2014 CC. The site has now gone live on the web masters server setup.
    Up until now the layout of the site has been working fine and responding to screen size.
    Early this morning in the USA the site stopped working. The layout for some users, not all, is only showing the phone view, and takes a long time to load.
    This is happening in Chrome and Firefox, but IE is displaying the site properly.
    So it looks like the CSS media queries are not working on all browsers.
    I am using BC for the test site, and one user having this problem can see that version of the site OK.
    I noticed that Chrome has done some updates recently Chrome Releases
    Has anyone else come across this problem with Chrome and Firefox with their responsive layouts?
    Thanks for any help given.

    Hi Ben,
    Yes, thanks for this link. The Travel Health Website is one of ours, hosted on BC, and no reported problems so far. We also have another large BC website with ga code in it and users are not reporting problems with it. The Headless Way
    However the problem website is hosted elsewhere on a different platform to BC. We have been developing it for three months now, and no problems so far until yesterday. The problem of the site taking ages to load, and timing out seems to be happening with about 10% of users in the USA. http://www.harrisonassessments.com/
    The web developer found a user in NZ who was experiencing the slow display problem. They looked at the site with Chrome, Firefox and IE. The site would only display on IE. When the developer removed the google analytics code, the site displayed fine on all browsers for the NZ user. We are waiting for users in the USA to wake up and test the site.
    So the problem definitely is related to the ga code and the responsive layout that was done by me in DW2014.1 fluid grid layout. So the related problem of DW2014.1 not being able to load htm files with ga code in them looks to be a good clue to what is going on here.
    As there was a bug report for DW2014.1 and google analytics code made in the other thread, I would be interested to know if that was ever solved.
    It is interesting that you are pushing Bootstrap and Foundation on me. (Big square websites here I come! lol)
    I wonder if DW is going to persist with fluid grid layout then? I certainly hope so, as I have spent 12 months blood sweat and tears learning how to do it in DW.

  • Dreamweaver CC has "internal error... while resizing a view" when asked to creat a fluid grid layout

    Excited for expanded fluid grid layout features it had, I got Dreamweaver Creative Cloud SPECIFICALLY for that feature.
    Sign up, download, install went smoothly. Open Dreamweaver CC, create new fluid grid layout, hit OK, name and desigante location of .css file and get the following error.
    "An internal error occurred while resizing a view. (Cview::ResizeFrameBy)"  OK
    I click OK and nothing happens. App freezes. No css, no files. No nothing.
    Have tried restarting, re-installing, different names and destinations for .css file. I'm running Mac 10.8.2
    Literally, this is the first thing I've done w/ an ACC app and I am displeased and frustrated. Getting customer service either via forum or offshore phone call less than ideal.
    (apologies for spelling error in subj. can't edit it)

    Can you try the steps mentioned on the thread: http://forums.adobe.com/message/5420680
    Verified Fix :
    For all the Dreamweaver crashes on opening Fluid Grid pages , Closing Documents or opening files
    Please make sure the default system fonts are all enabled - especially Verdana
    On MAC -
    Open Font BOOK from Applications
    Activate VERDANA FAmily of Fonts
    -Harshit yadav

  • How to setup a default direction for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
    Thanks.

    This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
    The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
    A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

  • How to setup a default size for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
    This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

    Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
    Here is the specific page http://foundation.zurb.com/docs/components/grid.html
    The default values are
    Em-base : 16px
    Row width: 62.5em (62.5em x 16px = 1000px)
    Columns per row: 12
    These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
    In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

  • Div options toolbar not displayed correctly in fluid grid layout

    When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.

    It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
    Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature.

  • How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

    Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.  

    While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
    CS6 Fluid Grid Layouts (6 min video)
    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
    Instead of fixed-widths in pixels, FLG code is all % based.  It starts with the mobile layout and cascades to tablet, then desktop.  If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
    Nancy O.

  • DW CC Fluid grid layout how to change px width for desktop layout

    Hi there,
    I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
    The width of the original design was 960 px and the hero pic and others have been exported at that size.
    The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
    However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
    How can you change this setting when starting a new fluid grid layout?
    I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
    Why is this?
    Not all of our clients want a site 1232px wide on a pc.
    Thanks so much.

    Hi Ben and Nancy,
    Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
    I have been following the recent videos from Adobe on this.
    As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
    So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
    It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
    However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
    Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
    One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
    Here is a pic of the screen I am talking about that sets the maximum width:
    I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
    If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
    Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

Maybe you are looking for