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?

Similar Messages

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.

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.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

There is no specific function that turns FGL on or off.
When you say that it has stopped, do you mean that the handles no longer show?
If that is the case, then I think you may have modified the CSS to such an extent that Dreamweaver no longer recognises it as belonging to FGL.
There are a couple of avenues for you
Redo the site and make sure not to touch the FGL CSS
paste the code here so that we can see what has gone wrong.

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.
http://adobe.ly/IUFngo

Although the whole fluid grid layout feature suffers from a terrible implementation, this video explains what is needed to understand, and warns very well for all the strange culprits in this feature.
It takes time for most designers to get used to the idea of fluidity in a visual representation of information, and let structural building blocks flow according to alternating views and rules. Let's hope Adobe Edge Reflow helps us doing that in a better, faster way.

How to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
Nancy O.

Edge Animate Stage size in Dreamweaver fluid grid

I have developed an animation and have almost everything scaling and resizing acceptably in a Dreamwaevr template...except the stage.
In Edge animate I have a stage size that is 1212px x 400px. When the animation is viewed on a PC all the dimensions are fine, but when viewed in tablet or mobile phone, the vertical height remains at 400px... which leaves an enormous gap between the bottom of the animation and the next div.
I have set the stage dimensions to %, and have turned on the "link width & height" switch, and the stage still does not respond in vertical height.
How can I get the stage to respond vertically with a fluid grid layout in Dreamweaver?
I also note that every time I open up a previously saved Edge Animate file, the stage automatically opens the file at 550x400px, instead of the correct dimension for that animation, so that I have to then reset the stage size to what is correct for that animation... ..any reason this may be so?
Thanks,
Glen.

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Dreamweaver CC fluid grid site, how do I give user the option to view desktop version on mobile?

Hi all, I've just built my first fluid grid site with Dreamweaver CC, just wondering what is the easiest way to give an option to the user to view the desktop version on a mobile device (so they can zoom-in and pinch around and get to see what would be shown on a desktop). My mobile version of the site is a lot different to the desktop. I've kept all the original code structure, css, media quries and use of boilerplate etc intact from the original dreamweaver cc template. If someone could please show the best way to do this would be great

Hi Ben, yes I know but I come across people who insist on using the desktop version of sites because they are more familiar with the layout of the buttons and dont want to relearn etc, I come across this many times on sites I visit myself actually where I don't have time to relearn the navigation of the site because I know the desktop version so well, if in a rush etc.
Hi Mary Blight its definatley possible, I mean I could create a new css file with desktop version only css and use jquery to change the mobile css to this new css file when a user clicks "view desktop button", its just that I must have over 2000 lines of css and about 200 classes thats properties are spread over the 3 different media queries (with different inhertence), and I really don't want to have to manually go through each if I have to.
Was hoping I might be able to use some view port meta tags like how apple does on their devices
<meta name="viewport" content="width=device-width, initial-scale=1"> something like this to fool the device into thinking its a desktop site, or something along those lines etc.

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

Fluid grid layout lost when closing and reopening Dreamweaver

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

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

Dreamweaver CS6 - New Feature - Fluid Grid Layouts

For those interested in what is coming in CS6, John Nack just posted a video on his blog to see about Fluid Grid Layouts:
http://blogs.adobe.com/jnack/2012/04/sneak-peek-of-fluid-grid-layouts-in-dreamweaver-cs6.h tml

A bit more http://www.dwcourse.com/dreamweaver/dreamweaver-cs6-features.php
Gramps

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.

Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna

Fluid Grid Viewport in Dreamweaver CC

Similar Messages

Maybe you are looking for