Cannot Resize a Fluid Grid

I'm working on designing my first website and I'm using CS6 Fluid Grids. I've come across my first totally puzzling problem. I want to narrow the width of a fluid grid from 100% to around 67% which should create two columns. As I'm resizing the grid from right to left, I can see the percentages and column numbers going down but as soon as I release the mouse, it always goes back to a width of 100%. I can't resize any of my fluid grids, including the footer.
The goal is to have the text in the grid below this one to move up and fill up the right 1/3 of the screen, giving me two columns. Doing this is incredibly easy and seamless in the video tutorials. I think this is one of best features of fluid grids but obviously I'm doing something wrong.

Some tips.
#1 Do not tamper with FluidGrid.css or boilerplate.css code. FGLayouts are very temperamental and even experienced coders can muck things up in a hurry.
#2 Use a separate external stylesheet for your content styles. If something breaks, you'll know where to look for the problem.
#3 Build your Mobile layout first because everything else is based on that primary layout. Then build your Tablet and finally your Desktop. Don't add any content to the page until you've perfected the Layouts in all 3 devices.
#4 When you're completely satisfied with your layout. SaveAs Template. Add Editable Regions for content that will change from page to page. Save & close your Template.
#5 Use the Template to spawn your site pages by going to New > Page from Template and hit Create. SaveAs index.html. Repeat for your other site pages.
Don't be discouraged. The first time I used FGLayouts, I had to start over 9 times before I got an acceptable layout.
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.

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.

Cannot drag divs in fluid grid layout

I am running Dreamweaver CS6 in OS X Mavericks.
When I am building pages in fluid grid layout I seem to reach a point where I can no longer grab div boxes on the left or right to resize. Is this because you cannot edit a fluid grid layout from a template?
Thanks,
Joshua

I can tell you from personal experience that once the FGLayouts are built for mobile, tablet and desktop, fully tested and validated, you should put a HALT on that phase of your project.
Then SaveAs Template. Everything from that point forward is sans the FG Design Panels and just about adding content.
And yes, keeping content styles in a separate physical file is highly recommended. That way if something awful happens to your CSS styles, you're not putting your FGLayouts in peril.
Nancy O.

Dreamweaver Fluid Grid Problems

I am having some weird issues since the upgrade to Dreamweaver CC 2014.1.1. I have Dreamweaver installed on an Asus laptop with the following specifications:
Windows 8.1 64bit
Intel Core i7-3630QM
NVIDIA GeForce GTX 670M 3gig
NVidia Graphics Driver 9.18.13.4752
24 gig ram
256 SSD Drive (Program installed on this drive)
750gb 7200 HD (files installed on this drive)
The problems I am running into are as follows:
When resizing the fluid grid in live view, I can select the right part of the div and drag it over to the left. When I try to click the left div and drag it over to the right it will not let me. I have to click to another view (for example from phone view to tablet then back to phone view) in order to drag the div over.
If I have several pages open and I switch from one page to another the code from previous page is showing until I do a refresh.
As many others are experiencing, it is slow when I type some text inside the div. Also when I change a CSS property (I have a separate attached CSS file) it takes a few seconds for the result to show in live view. All in all when dealing with all this, it gets somewhat frustrating.
I wasn't experiencing any problems like this before this upgrade.
Any thoughts on what I can do on my end to help with this?

Personally, I'd just go back to the older version and keep an eye on the forums until Adobe comes up with something. This is becoming much more commonplace with the latest release.
You can roll back using the Creative Cloud Desktop App by clicking the Apps tab, then scroll down to the Filters and Previous Versions link. That will turn the Install icons into dropdown menus with the available older versions.
I stopped upgrading DW with CC 2014.0 (last June's release), it has been rock solid for me. That version isn't available through the app though, you would have to download it directly from the link below:
http://download.adobe.com/pub/adobe/dreamweaver/win/cc/Dreamweaver_14_LS20.exe

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.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize, delete, duplicate and move up/ down ability.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
For this reason I cannot build new pages by copying one page to create another.
I have a third style sheet that I use for the navigation styles and h1 -h6 ect. tags. and I am also using a css drop menu, can one of these be the problem?
The css menu I am using has the following script - I goes at the bottom of the html page. Before the closing body tag,
<script>
$(function () {
$("#nav").tinyNav();
</script>
I am also using the following for image control - I place it towards the top of the fluid
grid style sheet.
    box-sizing: border-box; /* Opera/IE 8+ */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
Can some one please help.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
This implies there is something broken in your FluidGrid Layout CSS file.   It could be something simple like a missing semi-colon or curly bracket.   Run your code through the W3C validation tools below to check for errors. NOTE: ignore reported errors in boilerplate.css
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
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

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

Fluid grid template - editable region - resize not possible

Hi,
After quitting DW the first resizing problem was gone.
Now I saved the page as a template and inserted an editable region.
Then it wasn't possible anymore to recize the divs.
The lines are know yellow dotted.
Do I have to make editable regions in a different way?
See: http://www.ifacilityservices.nl/index.html
Thanks again.
Carla

Hi Nancy,
Thanks voor your reply!
Is it now not possible anymore?
I deleted the editable regions, but it stays with the yellow lines.
Carla
Van: Nancy O. [email protected]
Verzonden: zaterdag 24 augustus 2013 21:59
Aan: Carla Leliveld
Onderwerp: fluid grid template - editable region - resize not possible
Re: fluid grid template - editable region - resize not possible
created by Nancy O. <http://forums.adobe.com/people/Nancy+O.> in Dreamweaver CC - View the full discussion <http://forums.adobe.com/message/5623512#5623512

Fluid grid layout - not being able to resize divs

Hi,
I've been woring on a fluid grid layout... found somethings I wanted to change but when I launch DW there are no resize handles on my divs
Second issue is that I moved the Styles tab up next to the File tab and after relaunching it's back in another panel group.
Thoughts??
Debi

debibrighthope wrote:
Second issue is that I moved the Styles tab up next to the File tab and after relaunching it's back in another panel group.
Hi
Forgot to answer this one.
Did you save your 'custom' workspace?
It's at the top r/h, next to the search box. Click on the arrow next to the workspace name and select 'New Workspace'.
PZ

CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
img, {
    max-width: 100%;
But this code already exists in the css file when you create a new fluid grid based layout
img, object, embed, video {
    max-width: 100%;
can anyone help a newbie please..

this is my source code
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kyle Childress Foundation</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
</div>
</body>
</html>
this is my css
@charset "UTF-8";
@import url("/kyle.css");
/* 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:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    10;
    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/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* 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%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* 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.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
the animation GIF is 700 x 908
I changed the code from max-width to just width 100% but it still did not work ,, please help

Fluid Grid Viewport in Dreamweaver CC

Okay, I know my way around HTML5 and CSS3 so this is not a question about that. My issue is in the way the fluid grid is displayed while designing in Dreamweaver CC. I am using Trainsimple to learn the ins and outs of Dreamweaver and am currently learning about fluid grids. As I follow along I notice the grid guides on their tutorial are centered in the display port/frame. Every tutorial I can find is the same way and I cannot find this problem here or on the web at large. The right margin of the display is roughly 5x the left and the columns are visually offset to the left. The content which is centered in the view port doesn't align with the grids as they are offset to the left. I have tried resizing the "Model" smartphone dimensions to no avail. I have previewed the project in various web browsers and yes, the centered content is centered and responsive. Is there a setting I am missing or some other DW peculiarity that is preventing mine from looking like everyone elses?
Here is a screenshot for reference:

Has anyone experienced this, It does effect the rendering in browsers making centered content offset right of center. Help?

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.

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

Cannot Resize a Fluid Grid

Similar Messages

Maybe you are looking for