Disappearing fluid grid guides in CC2014.1

Using CC2014.1, when I create a fluid grid document I find the fluid grid guides (the gray columns) seem to randomly disappear.
For example I just tried it. Created a new site (all defaults, no other content). Created a new fluid grid document (also all defaults). The document appeared correctly with the grid guides visible. I saved the document to the site root (which is also where I saved the css when the document was created) and then closed it. When I re-opened the document I could only get live view (not design view) and the fluid grid guides weren't visible. I had not changed any of the display options.
I must be doing something very basic wrong but don't know what.
Nigel

I can;t see anything I might have done while saving the document to cause it to lose the fluid grid capability. I just saved the .html and .css files - I didn't change anything from how they were created by default.
As already stated, I am using the latest published version:
I also don't have Hide Live View Displays selected:
I'm copying below both files in case anyone can see anything odd that might be causing the document to lose its fluid grid identity:
test.html
<!doctype html>



 <html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Test.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
    <div class="gridContainer clearfix">
        <div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
    </div>
</body>
</html>
test.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%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
    clear: none;
    float: none;
#div1 {
.zeroMargin_mobile {
    margin-left: 0;
.hide_mobile {
    display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    clear: none;
    float: none;
    margin-left: auto;
#div1 {
.zeroMargin_tablet {
    margin-left: 0;
.hide_tablet {
    display: none;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#div1 {
.zeroMargin_desktop {
    margin-left: 0;
.hide_desktop {
    display: none;

Similar Messages

Fluid Grid guides not showing

Anyone else having trouble with getting fluid grid guides to show? I've tried all the obvious solutions... Also, anyone having touble getting the "View in Browser" button to work?

Start with this:
Deleting Corrupted Cache and/or Configuration folder in DW
http://forums.adobe.com/thread/494811
If that doesn't fix things, try this:
Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
If that still doesn't fix things, you may need to do a clean re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Nancy O.

Fluid grid guides not showing up.

I checked to make sure that they are checked on in the visual aides options and they are. Dreamweaver says it cannot find the Fluid Grid Style, no idea how it got lost or what that means or how to fix that. Multiscreen preview isn't working either.
Please help,
Thanks!

Start with this:
Deleting Corrupted Cache and/or Configuration folder in DW
http://forums.adobe.com/thread/494811
If that doesn't fix things, try this:
Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
If that still doesn't fix things, you may need to do a clean re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Nancy O.

Fluid grid layout guides and elements are suddenly gone

I’m working in Dreamweaver CC and trying to build a fluid grid layout from scratch. Everything works fine for a while then I notice that suddenly all the grid guides are gone, the icon (next to the “Live” button) that allows me to toggle the fluid grid guides on and off is gone, and when I try to insert a new div tag…(within the "gridContainer clearfix" tag), the dialog box that opens does not have the option to “insert as fluid element.” Even when I click within a div in my page, the usual options that surround the div are gone as well. It’s as if Dreamweaver doesn’t recognize the page as a fluid grid layout, but when I preview the html, it is still responsive and looks like it is supposed to.
Does anyone know what could’ve changed that might cause this?
I even called Adobe and the tech support guy told me they are not trained in CSS and could not help me. I would think Adobe would be familiar with CSS… right?
If anyone has any suggestions that would be great?

Sudarshan Thiagarajan
The only template files I changed were the main css that I specify when creating a new FG layout.
I changed this for all three devices within the "style.css" page:
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%; (this is is what I changed on the mobile, tablet and desktop settings)
padding-left: 0.95%;
padding-right: 0.95%;
clear: none;
float: none;
margin-left: auto;
This the dialog box I get when trying to insert a new div (it used to ask me to insert "As a fluid element"

Fluid grid layout won't open

I simply create a new fluid grid layout.. name and save the default css file ...name and save the default first page and upload to my server.
Everything works fine and I am able to work on the page in dreamweaver cc as a fluid grid layout.
But when i close down dream weaver, (even if i do no more than save the two files and dont edit anything else) and reopen dreamweaver cc i can no longer work in fluid grid layout, dreamweaver doesnt recognise the page (default) as fluid grid layout and i cannot see the little button that toggles fluid grid layout on and off.
I have not edited the css file or the page in anyway.
someone suggested i go to visual aids and enable fluid grid guides .... but this does not exist and there is no longer a fluid grid button next to the live view button.
I really need to get this working, fluid grid layouts are useless if you cant edit them after creating them
Here is the default code
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/test2.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div></div>
</body>
</html>
Thanks in advance for any replies

I defined the site, when i imported the site as business catalyst site.
It is there, i have checked all the details are correct and can edit and work on the site as a normal site, I just can't get it to recognise any pages i've created as a fluid grid page after closing and reopening the page.
Yeah I watched the video and that is what im doing, create new page as fluid grid layout, save the css to the root, save the html page to the root, all works fine and i can edit in the fluid grid, the grids there, the little buttons there, the handles to adjust fluid grid propertys there.
But at any point if i close the page and open it again i lose the handles, the fluid grid and the little button and can only edit as a normal dreamweaver page.
I tried to phone adobe support yesterday but gave up after 2 hours of waiting
Cry

Dreamweaver CC fluid grid controls disappearing and other info

Hi All,
I have finally completed my first commercial fluid grid design in Dreamweaver CC and it was a bit of a mission.
One disconcerting thing about the program is that the fluid grid controls keep disappearing. You know, the ones where you can hide the div, duplicate it, move it up or down, or delete it.
I have found that when this happens, I need to close the html file I am working on in DW CC and then open it again. The controls then appear again, so you can rearrange your various layouts as demonstrated in those breezy demo videos about DW CC fluid grid layouts.
So don't just conclude you have broken the code when these controls disappear, try closing and opening the file again first.
Also you need to insert all the divs you need for all layouts in the mobile phone layout, as that is the main layout, governing all the others because of the way the media queries are set up in the CSS file that is created when you start your fluid grid layout.
I could not work out how to reorder divs in the different layouts, this may not be possible at the moment. Instead I created divs in the phone layout to cover all of the divs needed in the three layout sizes and switched them off and on in the various layouts. This works really well, but I found that DW behaved strangely if I switched a div off in the mobile layout and then tried to style it in one of the other layouts. So I suggest styling all of the divs first for all the layouts before switching any of them off in the mobile layout.
Also you can't copy the contents of one div and put them in another without freaking the program out, especially if you are working in a div that is hidden in the mobile layout.
I suggest saving regularly as you add new divs and style them and view live in a browser immediately, as the preview in DW CC is not reliable. It can't show rounded div corners or shadows for example.
Keep an eye on the code as it is built by your use of the CSS Properties panel. If it starts going wrong, close the html file without saving it or the attached CSS file. Then go back in and try what you want to do again.
If you save weird code errors, your work could be so compromised that you need to start all over again. So quit out without saving if you notice this.
After much experimentation I now insert images into a div, rather than make them a background image, as the background image will not completely show if the content of the div is not long enough. This may require a rethink of your design.
Doing any absolute sizes in a div will make the responsive design very hard to style and possibly break the code, so I don't suggest it.
Adding padding to a div can make it stick out of right edge of the design, I am not sure why this is the case and could not work out how to stop it. So use low pixel numbers in the padding of a div.
Also control z seems to be a sudden death move, so I stopped doing that.
So my first job has been a bit of a ride, but I seem to be nearly there on my first design.
I think DW CC is still a work in progress and I look forward to further updates of the software.

Hi Top Ten,
You can't get them back once they go. You now need to edit the css code manually to do the same thing.
For instance if you want divs to sit beside each other you put this in the css for that div:
clear: none;
This css means that div will allow other divs to sit beside it.
Then put in a width in percentages. For example if you have three divs that need to sit beside each other put:
width: 33%;
in each of them. Or maybe:
width: 31%;
margin-right: 2%;
Fortunately in DWCC it is now robust enough for you to do those code changes by hand. My original question in this thread was posed when DW CC fluid grid had just come out and crashed easily. A year later all is well, so you can do those changes in the css code without problems now.
Regards,
Mary

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

You have the latest version (CC 2014.1 or 2014.1.1) in which the interface condenses Design View with Live View buttons in normal layouts. See screenshot.
However, in FGLayouts, Live View is the only option which poses some editing problems and has been highly criticized.
Is there any way to display the Design View in fluid grid pages?
New Features in CC 2014.1 October Release
http://helpx.adobe.com/dreamweaver/using/whats-new.html
New Features in CC 2014.1.1 February Release
https://helpx.adobe.com/dreamweaver/using/whats-new.html#Enhancements%20to%20Live%20View%2 0editing
You can disable this restriction by adding an X to the FGLayout CSS.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Having said that, it might just be simpler to revert to an earlier version. Log-in to Creative Cloud Desktop app. Go to Filters & Versions > Previous Version. See screenshot.
Nancy O.

How do I turn off fluid grid layout guides in CC?

In CS6 it was simple: just go to View > Visual Aids and uncheck "Fluid grid layout guides" In CC that option is not there. And I can't seem to find it. So how do I turn off fluid grid layout guides in CC?

AFAIK, There is no option for you to turn off just FG Layout Guides in DW CC (for now).
However, you can hide the guides with just 1 click. See screenshot below:
This button toggles FG View. Disabling it will hide the FG guides that you see on screen.

Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

Fluid Grid Layout CS6

Hi Guys,
First post here so I might be in the wrong place so please let me know if I am and point me to where I should be! Thanks.
So I've been developing a new site using CS6 with the Fluid Grid Layout system, everything has been going great until all of a sudden the fluid grid system disappears, at first I thought I had disrupted the code too much with my custom CSS though I rolled back the file to a version that was working perfectly and yet the fluid grid system is still no where to be found. I guess I hit a hotkey that turns the function on and off though I cannot for the life of me find what it is. I've tried closing the file and opening again, shutting down dreamweaver completly and even restarting my pc with no effect.
If anybody could help me with this issue I would be very grateful!
Kind regards,
Mitchell Ransom

View > Visual Aids > Fluid Grid Layout Guides.
Window > Multi-screen Preview.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

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

Fluid grid designs

I am attempting to build a fluid grid site, however, after the initial page creation the option on the "insert" tab for "fluid div" (shown in all fluid grid videos & tutorials) doesn't show up. Instead only "div" or "draw absolute position div" are there. If I click on the "div" I get an insert div dialog box showing "class". Whatever I attempt, I do not get the familiar green fluid div boxes to work with. Now the boxes are blue outlined and don"t allow me to layout the page. I have created fluid grid pages before in Dreamweaver in the past year but didn't have this problem. Where am I going wrong???

Go to View > Visual Aids or simply click the Eye icon on your toolbar.
Check Fluid Grid Layout Guides.
Also refer to this article -- Creative Cloud CS6 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O.

Missing resize handles fluid grid layout

I have created a fluid grid layout and need to resize for tablet and desktop views but resize handles will not appear. What did I do wrong?

Go to View > Visual Aids > and enable Fluid Grid Layout Guides. However, if you tampered with the temperamental Fluid.css code, you probably broke the layout. Try starting over.
Nancy O.

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.

Disappearing fluid grid guides in CC2014.1

Similar Messages

Maybe you are looking for