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.

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.

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

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 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/

Problems with margins and borders in a fluid grid layout

When I create a page using the built-in fluid brid layout option in Dreamweaver CC, I have problems adding margins and borders. to the elements I've added to the page.
Is there a method to prevent the above occurring?

Hi Ken
I'm sizing each element to specific grid sizes and, working in the "show fluid grid layout guides" view am aligning the second element alongside the first by click the "up" arrow. e.g.:
I'm using a 24 grid layout (mainly because I thought it would allow more flexibility when working on two or three column layouts)
I have the first element 10 grids wide (41.348% wide) and the second element 14 grids wide (56.9% wide)
I've populated the first element with text including an h2, h3 and p element
In the second element I've inserted an EasyRotator slideshow
The third element is below the first containing text . That is also 10 grids wide
The fourth element also contains text and is 9 grids wide and has margins of left = 8% and right = 7% so that it appears below the gallery and it has a border around it.
The problem occors when I try to place a border around the element containing the EasyRotator. When I do, it become too large and drops below the first element.
How can I control this problem?
Thanks in anticipation.
David
P.S. Can you recomment any tutorials that provide info on the above.
I'm subscribed to Lynda.com, have searched adobe TV and looked at all the tutorials that are provided through Dreamweaver CC Help.
Nowhere can I find the above subject covered.
I'd like to find a tutorial which also provides exercise files to work with if possible.

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.

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.

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.

How do you turn off the auto grid?

How do you turn off the auto grid? I read in a forum that the solution is "View- show- turn off grid". But the weird thing is I had to have that website open to even get the alternative up under "View". If I didn´t, there were other alternatives there. Why?
The second problem is, when I finally got the "Turn off auto grid" alternative up, it will not be unchecked…. I´m working on a mac.
Thank you in advance!
Jeanette

View > Snap To > None.
Nancy O.

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.

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

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

Similar Messages

Maybe you are looking for