Hide / Show fluid grids on Dreamweaver CC 2014.1

Hello !
How can we hide the fluid grid on the 2014.1 release ?
Thanks a lot !

Hide how exactly?
Do you mean you want to use FGLayouts in 2014.1 with Design View?
Open your Fluid Grid CSS file and add an X as shown below. This will trick DW into thinking it's a normal layout so you can use Design View, spell check, copy & paste text, etc...
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:     X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Nancy O.

Similar Messages

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.

Fluid Grid problem dreamweaver cc in IE11

Site made in dreamweaver cc with fluid grid layout. It looks and works fine in Safari en Google CHrome but the fluid grid does not work in IE11. Someone a solution? http://www.fvdc.be

Troubles with the fluid grid not entirely solved.
The solution was that i imported tables in the Fluid Grid and that was not a good idea!
At the moment i am one step ahead but still not satisfied with the result.
The appearance in IE11 looks better, never the less when i reduce the screen size, the layout does not follow all the way.
Even in Fire Fox, Safari and google chrome.
There is even an additional problem.
II do only get one direction right on mobile screens. Vertical or horizontal, but not both.
In adapting on Dreamweaver, when i set-up one scene size right for horizontal and vertical positioning then the layout of the other screen sizes change as well (in the wrong way)
In viewing our site you probably understand the problem better then in the explanation in this writing.
http://www.fvdc.be
Thanks for all the previous advice and we hope to get an answer to this post!
Thanks a head, greets from Frank

Fluid Grid Layout Dreamweaver CC

Hi guys!
How is everybody? I am creating a fluid grid layout in Dreamweaver CC and when I use the visual design, I go to insert and insert either a paragraph or an h1. It always makes me create either a class or a id. Is that normal for a fluid grid layout? It will not let me insert as just h1 of p, I always have to either create an id or a class. Thanks a ton.

Hi Nancy. Thanks for getting back to me. I'm sorry I didn't get to go into more detail. I was in a phone call while I was typing. I am not so good at multitasking. With the visual view in a regular html document, I can easily insert tags like an h1 or p and am not required to create an id or class. it works just fine. However, when I use the fluid grid layout which I absolutely love, if I am using the visual view and I go to structure insert h1 or p, I am prompted to either make it a class or a div. I just find that a bit odd and am wondering why they require you to do that. I did take your advice about just going to the code view and typing out the tags. I can still go back to the visual view and create the selectors.
I just found that to be a bit odd as it doesn't prompt in a basic document.

Unable to edit elements in Fluid Grid Layout - Dreamweaver CC

Hello. I have an issue whereby the elements inserted in to a Fluid Grid Layout designed webpage become 'locked' (??) I can no longer edit them and when they are clicked on I just get a blue border. No handles, eye, delete button etc..
I cannot find any pattern on why this is happening and seems to be random. Although I am happy to accept I am doing something wrong..
Any ideas?

aytonwest
Are you removing/modifying any of the comments in the related CSS file (custom styles file and not the ones provided by boilerplate/JQuery/etc)
DW uses some comments to identify the page as a FG page. If you happen to remove/modify any of that, DW will stop recognizing it as a FG page.
The comment block would look similar to:
                Dreamweaver Fluid Grid Properties
                dw-num-cols-mobile:                    7;
                dw-num-cols-tablet:                      11;
                dw-num-cols-desktop: 11;
                dw-gutter-percentage: 67;
                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/

How to convert existing website to fluid grid in dreamweaver cc

Is there a way to convert an existing website to a fluid grid site in Dreamweaver cc

Nope. There's no magic button. You must start over.
Build mobile layout first. Then tablet. Finally desktop.
When you get your layout all situated and working well in all device widths, copy and paste content from old site into new layout.
Nancy O.

Background images in fluid grid layouts Dreamweaver CS6

How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other.

CSS Transitions Fluid Grid Layout Dreamweaver Cs6 'stops working'

I am unable to use the CSS Transisions panel at all in Fluid Grids Layout.
I open the panel but when I select the + to add a transition, the program crashes.
This is my second website, the same happened when building my first website, but I did without as I could not get a solution (about 18 months ago).
I need it on this website.
Some people in Adobe support have my files but can't seem to find a problem. I have Windows 8 on a powerful computer.
We've tested CSS Transitions on a brand new Fluid Grid Layouts page and it works.
But never for a page I have content in.
I began seeking help on this about a month ago and now I'm really being held up.
I'm disappointed and frustrated that Adobe isn't being more pro-active in finding the solution for their customer.
I can't email customer service to flag my problem, I am reliant on people who don't get back to me in a timely manner.
What can I do as this Adobe product has not been working for me and I am relying on it.
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

Missing handles fluid grid layout dreamweaver cc

I have seen the other postings to correct the problem with resolving the missing handles with a div in dreamweaver cc BUT it is not working when I try it.
very frustrating... when you set up the initial design the boxes are there to resize, move up, hide divs BUT once you save the design and return to the page, they are missing.
HOw are you to design a web site in one sitting.. bit ridiculous!
Please help with this issue!
Donna

Did you manually edit any of the FluidGrid CSS code? It's very temperamental and prone to failures if you tamper with it. I always advise people to use a separate external style sheet for content styles.
Nancy O.

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.

Hide / show grid in a graph programmaticly

I would like to hide / show the grid (minor / major) progammaticly. I try to create a property node, but I don't find the way to access the 'hide' property... Thanks.

I might need corrected, but I don't believe you can change the 'minor' grid color, but yes on the 'major'.
Its a Write-to property node called Grid colors, and you can have the X & Y grids as separate or Clustered together elements. You'll need to add 2 color boxes [Controls > Numeric palette] to your front panel (X & Y). The user's selection is a numeric value sent to the property node(s) you wired.
Good Luck with it, Doug

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"

In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while viewing those three columns comes down one by one..........but works well in wide screen......is there any problem in the size of the monitor..........

Here is the link to the tutorial......
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
It doesnot work well in Internet Explorer 8....What to do for the responsive site to work well in all the older versions of IE....

Dreamweaver Fluid Grid and Twitter Bootstrap

Does anyone know if it's possible to graft the Twitter Bootstrap styling, elements and functioning onto the Fluid Grid in Dreamweaver CS6? If so how?
I think it would be great to be able to have the ease of manipulating the rows and columns using the Fluid Grid and have all the cool styling and all from Twitter Bootstrap.

Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.
@media only screen and (min-width: 768px) {
/* Grids only applied to desktop and tablet
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12
    display: inline;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
.row [class*="col"]:first-child {
margin-left: 0;
.row .col12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
.row .col11 {
width: 91.489361693%;
*width: 91.4361702036383%;
.row .col10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
.row .col9 {
width: 74.468085099%;
*width: 74.4148936096383%;
.row .col8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
.row .col7 {
width: 57.446808505%;
*width: 57.3936170156383%;
.row .col6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
.row .col5 {
width: 40.425531911%;
*width: 40.3723404216383%;
.row .col4 {
width: 31.914893614%;
*width: 31.8617021246383%;
.row .col3 {
width: 23.404255317%;
*width: 23.3510638276383%;
.row .col2 {
width: 14.89361702%;
*width: 14.8404255306383%;
.row .col1 {
width: 6.382978723%;
*width: 6.329787233638298%;
/* Prefix Extra Space >> 12 Columns
.prefix_1 {
    padding-left: 8.333%;
.prefix_2 {
    padding-left: 16.667%;
.prefix_3 {
    padding-left: 25.0%;
.prefix_4 {
    padding-left: 33.333%;
.prefix_5 {
    padding-left: 41.667%;
.prefix_6 {
    padding-left: 50.0%;
.prefix_7 {
    padding-left: 58.333%;
.prefix_8 {
    padding-left: 66.667%;
.prefix_9 {
    padding-left: 75.0%;
.prefix_10 {
    padding-left: 83.333%;
.prefix_11 {
    padding-left: 91.667%;
/* Suffix Extra Space >> 12 Columns
.suffix_1 {
    padding-right: 8.333%;
.suffix_2 {
    padding-right: 16.667%;
.suffix_3 {
    padding-right: 25.0%;
.suffix_4 {
    padding-right: 33.333%;
.suffix_5 {
    padding-right: 41.667%;
.suffix_6 {
    padding-right: 50.0%;
.suffix_7 {
    padding-right: 58.333%;
.suffix_8 {
    padding-right: 66.667%;
.suffix_9 {
    padding-right: 75.0%;
.suffix_10 {
    padding-right: 83.333%;
.suffix_11 {
    padding-right: 91.667%;
/* Push Space >> 12 Columns
.push_1 {
    left: 8.333%;
.push_2 {
    left: 16.667%;
.push_3 {
    left: 25.0%;
.push_4 {
    left: 33.333%;
.push_5 {
    left: 41.667%;
.push_6 {
    left: 50.0%;
.push_7 {
    left: 58.333%;
.push_8 {
    left: 66.667%;
.push_9 {
    left: 75.0%;
.push_10 {
    left: 83.333%;
.push_11 {
    left: 91.667%;
/* Pull Space >> 12 Columns
.pull_1 {
    left: -8.333%;
.pull_2 {
    left: -16.667%;
.pull_3 {
    left: -25.0%;
.pull_4 {
    left: -33.333%;
.pull_5 {
    left: -41.667%;
.pull_6 {
    left: -50.0%;
.pull_7 {
    left: -58.333%;
.pull_8 {
    left: -66.667%;
.pull_9 {
    left: -75.0%;
.pull_10 {
    left: -83.333%;
.pull_11 {
    left: -91.667%;
/* Clear Floated Elements
/* http://sonspring.com/journal/clearing-floats */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-ha ck */
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
.row:after {
clear: both;
.row {
    display: inline-block;
* html .row {
    height: 1%;
.row {
    display: block;
.row .first {
    margin-left: 0;

Adobe has made upgrades with the Dreamweaver CS6 fluid grids. Is there a better tutorial than this?

It there a better tutorial than this anywhere http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html ? I can't seem to understand this guy. I know he means well. I really want to learn fluid grids. Thanks any reconmandations?

If you want to learn to make responsive Web pages, do not rely on
Adobe's fluid grid system. Learn CSS yourself. If you need to rely on a
grid framework, then you are barking up the wrong tree. I can absolutely
guarantee that if you do not fully understand the theories behind
responsive design and you use the Adobe fluid grid (or the open source
frameworks/scripts that Adobe uses) your site will eventually break.
Study and learn. If you are sharp enough, you will quickly come to
understand that nearly every article and tutorial on the subject is
plain wrong. The essence of responsive design is very easy and does not
require anyone's code but your own.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Hide / Show fluid grids on Dreamweaver CC 2014.1

Similar Messages

Maybe you are looking for