Fluid grid problem design view

Need Help, Dreamweaver CC, operating on Windows 7 64 bit
My design view panel is set to 480 x 800
From the CSS Designer Panel, I select my fluid_grid.css from the sources section
I select GLOBAL from the @Media section
For some odd reason, my mobile size is changed to 1129 x 603
If I go back and set the screen size for 480 x 800, the @Media GLOBAL is deselected........ HELP!
I have uninstalled and reinstalled.
Thanks in Advance,
Bryan

GLOBAL targets the section of your style rules that is not subjected to media queries.
only screen and ( min-width: 481px ) targets the style rules that are subjected to that media query.
and so forth
The reason that screen widths less than 481px are not subjected to media queries is because the design is mobile first. In other words, if there were no media queries in your CSS, then all screen sizes would have the same style rules applied as if they were less than 481px.

Similar Messages

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

  • Problem: design view looks completely different than live view

    I am trying to make changes to my home page in Dreamweaver, and when I am viewing the page in 'design view' the background image for the container is missing, and the divs are all over the place. When I view the same page in live view and in browser preview, it looks fine.
    Because I can't really see what the page is going to look like in 'design view', I can't really make changes to the site. Any help would be much appreciated.
    Link to screenshot of 'design view'  
    www.simply-eden.com/images/screenshot1.tiff
    Link to screenshot of 'live view'       
    www.simply-eden.com/images/screenshot2.tiff
    link for purpose of viewing the code only
    www.simply-eden.com/images/index.html
    Thanks for the help.

    When things get really goofed up, it could be caused by malformed code or orphaned div tags.  Sometimes browsers will let you slide with poor code, but DW Design View won't.
    Use these online code validation tools and fix any reported errors.
    HTML Validator - http://validator.w3.org 
    CSS Validator - http://jigsaw.w3.org/css-validator/  
    HTML & CSS Tutorials - http://w3schools.com/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.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.

  • How to get 100% width in fluid grid layout CC

    I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

    Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
    Foundation Zurb
    http://foundation.zurb.com/templates.php
    Skeleton Boilerplate
    http://www.getskeleton.com/
    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
    http://www.initializr.com/
    DMX Zone's FREE Bootstrap extension for DW
    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
    Project Seven's Page Packs (Commercial CSS Templates)
    http://www.projectseven.com/products/templates/index.htm
    Adobe Edge Reflow
    http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
    PS. I don't work for Adobe.  I'm just a product user like you.
    Nancy O.

  • Fluid Grid Colums NOT aligning

    Hi everybody.
    I am using Dreamweaver CS6 and I wanted to use the fluid grids for designing websites for Desktop/iPad/iPhone.
    I understood the basic principle, but I have one problem.
    The columns do not line up as they should.
    I have made a composite of the different browsers and devices.
    I run Mac OSX 10.7.5.
    Does anyone have the same problem?
    Thanks in advance
    Markus Ziegler

    If you've been using Dreamweaver a long time you should realize that:
    a) Features added to address trendy issues (like responsive design) are
    relevant to the "rapidly changing web" and as such they need to be kept
    up to date. Unfortunately, Adobe ha a well documented history of not
    updating such features.
    b) Your friends using free solutions may i fact be using some of the
    code that Adobe uses in its Fluid Grid feature, which is not an original
    piece of work by Adobe. It is, instead, code acquired from several open
    source solutions... that were very popular when CS6 was being developed
    but which have now been pretty well replaced by better methods.
    That said, Dreamweaver is a marvelous tool. Adobe can't really be blamed
    for trying to take advantage of buzzwords to add "compelling" new
    features, but an educated user needs to understand that what gets added
    in in terms of client-side functionality (CSS + JavaScript) is not
    Adobe's strength.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    Since 1998

  • Something's wrong...Design View issue....

    OK.
    I'm attempting to take an Excel purchase order form and turn it into an HTML form for a custom demo that I will be performing tomorrow.  The nature of the demo isn't important; what is important is that I have no choice but to use Design View, as I need to make sure the HTML version is visually identical to the Excel version.  Everything was going fine...until I glanced over into the code and noticed that instead of intuitively assuming that there should be one FORM element for multiple INPUT elements, Dreamweaver created a separate FORM element for each INPUT.  So of the 15 elements I've got so far it created a separate FORM element for each.  This is a problem, because the form won't submit properly in this fashion.
    So I did the logical thing: Went into the code, removed the extra FORM elements, and migrated one of them to just after the BODY tag but before the actual content, then added the end tag at the tail end of it all.  What happened next is my problem: Design View is all kinds of whacked out.  It's not abiding by any of the table structures, background colors, anything.  The code is correct - previewing the page verifies this.  Firefox is about 95% accurate, and I can live with that threshold.  IExplorer is about 85% accurate, and I can fix what's not correct, but it's way more accurate than Design View which just doesn't render it correctly at all.  If I do Live View it's fine, but I can't edit WYSIWYG in that view.  Now I'm stuck unless I "screw up" the code again, which I don't want to do..  I don't have any fancy scripts, nothing out of the ordinary...just regular tables, inputs and a few background colors rendered via CSS.  I haven't even gotten halfway through the project yet.
    Does anyone know why Dreamweaver does this?  Why would Design View's rendering of simple tables be so astronomically different from what the browser sees?  Is the Design View rendering engine too structured or something?  See pics.
    This is WRONG.
    This is RIGHT.

    I would think Design should show me what IE is seeing, at the very least.
    This isn't FrontPage, you know?  I'm pretty sure DW Design View uses a WebKit rendering engine, aka Safari & Chrome.
    for whatever reason Dreamweaver won't allow me to apply proper styling (background colors, font sizes, etc) without going CSS.  It's quite annoying.
    CSS is not some arbitrary method fashioned by Adobe to make your life harder.  It is in fact a web standard recommended by the W3C to make the web better for everyone.
    The separation of Content (HTML) from Style (CSS) is not a brand new concept either.  It's been around since the late 1990's.
    To appreciate what CSS can do for you, visit the CSS Zen Garden.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

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

  • Is there any way to display the Design View in fluid grid pages?

    After upgrading to the newest version of DW CC 2014, I noticed that the Design View is disabled in Fluid Grid pages. You can only use the Live View to edit those pages. The Design/Live button displays on non-fluid pages.
    I'm wondering if there is a work-around to allow Design View editing on fluid pages. It is a major hassle to try to edit some things in the Live View. It would nice to have a choice.

    Have you actually tried using is? Try this?
    1) Create a new Responsive Layout. We’ll call it demo.php, fluid.css and the usual accompanying DW files.
    2) Enter demo.php and progress is normal. Everything works. You can choose to view both Live and Display and edit accordingly.
    3) Close down DW.
    4) Open DW and open demo.php
    5) There is NO LONGER a Display View option and Live View does not EDIT. (at least it doesn't for me)
    6) I can ONLY edit work in CODE view.
    Thus, on brand new files, all is fine. The moment DW is closed and the files becomes “old” it can no longer be seen or edited properly.
    How am I supposed to provide support to clients? How can I access a Responsive site I built last week when Live View will not edit and Display will not display?
    I feel this is a programming error, not a purposeful act.

  • 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.

  • Problems trying to develop a template using Fluid Grid Design

    Having serious problems trying to get a template to work using Fluid Grid Design with Dreamweaver CS6
    I have develop my template with editable regions etc, however when I load it to make an html5 page and preview it on any browser it comes completely blank
    If I do this on an HTML5 document without Fluid Grid it comes out fine.
    I heard this issue is happening to other people as well
    Need to resolve this issue as soon as possible
    Your help will be highly appreciated
    Mike Riego

    Before you create a template, you need to a) properly define a local site folder in DW. And b) test your prototype (Fluid Grid page) to ensure the code is valid and it works in all target browsers/devices.  
    When you're completely happy with your prototype page, SaveAs a DW Template and close it.
    DW will create a Templates folder in your local site folder for you.
    1. File > New > Page from Template > select your newly created template from the 3rd panel. Hit Create.
    2. This is a child page spawned from a Template.dwt.  
    SaveAs index.html. 
    Preview in browsers.  It should work just fine.
    Repeat Steps 1-2 for remaining site pages.
    Nancy O.

  • Fluid grid layout problem

    I am trying to create a fluid grid layout.  In fact it is why I purchased Dreamweaver CS6.  Problem is after I create the first div which I named header it works fine.  However, on inserting the next div Dreamweaver inserts the following text in my index.html:
    @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:3; dw-num-cols-tablet 8; dw-num-cols-desktop: 12; dw-gutter-percentage 20; 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: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { 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: 91.0625%; padding-left: 0.9687%; padding-right: 0.9687%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { 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.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }
    I suspected the respond.min.js file was causing the problem so I downloaded an update but it didn't help.  At this point I am not able to use this feature of Dreamweaver.  Any help will be appreciated.

    Thanks for the help.  I am using version 12.0 build 5861.
    I was trying to follow the example in a book I have called Dreamweaver CS6 – The Missing Manual.  When I got to the section discussing Fluid Grid Layout, I attempted to follow the example step by step.  I was able to insert the first div which I named header.  I looked at my css file and it had placed the #header.
    I knew that I had to remain within the container  div.  I went into the code view and placed the cursor to the right of the header div.  I then clicked the insert Fluid Grid Layout Div Tag button.  That’s when it automatically inserted all of the code I indicated in my post.
    I then started to follow the example in http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html .  I got the same results.
    I’m beginning to wonder if there is an error in the Dreamweaver software itself.
    Any help you can give will be appreciated.
    Sheridan

  • Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

    Hi pros,
    I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together.  I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
    So here are my specific questions:
    How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on  the bottom and styling has not worked.
    Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
    Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
    Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
    Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
    I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

    Making an external style sheet.
    Go to File > New > Blank page > CSS. 
    Hit create button.
    Add some style rules to your new style sheet and save it. 
    Link your HTML pages to your new style sheet using the directions below.
    Dreamweaver, Linking HTML to External Style Sheets
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    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.

  • How to make regions editable in fluid grid template in 2014.1.1 in LIVE view - can't open the template editable selection panel

    I am teaching a course in Dreamweaver 2014.1.1
    We are setting up templates in fluid grids.
    We need to make regions editable.
    The LIVE view replaced the DESIGN view and does not have certain options accessible anymore.
    I can't find the command to access the dropdown panel to make a region editable.
    The Template tab at top, and the make editable options subtab, will not come open in fluid grid template mode.
    Does anyone have a way to do this?

    I was under the impression that the February update (2014.1.1) released a few days ago had fixed these problems.  I urge you to file an official bug report below.
    https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
    My advice for now is to stay away from Fluid Grid Layouts.  But if that's not an option, I'll show you a trick for getting Design View back.  Open the Fluid Grid CSS file and add an X as shown below.  This tricks DW into thinking it's a normal layout.
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:      X 4;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    25;
    =====================================
    Once saved, you should see Design View as an option.
    Nancy O.

Maybe you are looking for