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.

Similar Messages

Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
Thank you

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

Favicon does not show up on Google chrome and firefox with new muse release. Opera showing favicon ok.

Favicon does not show up on Google chrome and firefox with new muse release when exporting HTML or publishing with FTP. Opera showing favicon ok. Previews Muse release was working fine.
this website was created with one update back BK Foto
this one page was updated with latest updated Muse and after publishing with FTP through Muse favicon does not show up Paslaugų Era | Foto Video Paslaugos

Export your HTML and then Just edit index.html with any text editor look for sentence <link rel="...................................>
Then delete all this sentence and copy this one
<link href="//PATH/favicon.ico" rel="shortcut icon" type="image/x-icon">
PATH = Where you have your favicon.ico
I usually copy the favicon.ico in the folder images so the sentence will be like this
<link href="//mydomain.com/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
i hope it helps you
Sorry about my english, my spanish is much better
Juan Pedro Avila

Adapt existing web site with fluid grid layout

Hi everyone,
I'm wondering if I could take a exisiting website and using Dreamweaver CS6 (which I don't owned at the moment) "easily" create associated fluid layout for tablets and smartphones.
Or do I have to start a new website "from scratch" to get the fluid layout?
I'm just beginning with website creation (only 2 at the moment) and I tried out Dreamweaver 5.5 at the beginning of 2012... since I didn't find any other tools that could do the job like I feel Dreamweaver can, I'm in the process of convincing myself I should buy Dreamweaver CS6.... I won't hesitate much longer if I could take a existing website and be able to easily adapt it to fluid layout.
Thanks for your help
Sebastien

You would have to start over with a whole new Layout. Once you get that designed, then you would need to insert content. There is no magic button for converting existing sites to Fluid Grid Layouts because it's more complicated (3 CSS layouts instead of one).
In addition, Fluid Grid is a new feature in CS6 that still needs some refinement. In order to build responsive designs that work in all devices, you must understand the technology.
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Trouble in Dreamweaver with fluid grid layouts

Hi! This is my first time posting here. I have been having intermittent problems in the fluid grid layouts. The sizing handles that are supposed to be there in a fluid element/div sometimes disappear along with the duplication icon and the arrow that moves a div/element up to the previous row. For instance I am working on a lesson in my online class for Dreamweaver that is asking me to style an unordered list for a menu. I want to make it into a horizontal menu where each item is 3 columns wide. Without the handles I cannot size the items in the list nor "bump them up" next to each other. Does this make any sense? Sometimes, they are there and sometimes not. Mostly not there. This is very frustrating! Can someone offer any solutions?
Paula Jo Nyman

I have the same Issue, I have been trying to get it resolved for a while now, but the live customer support is terrible, I feel like they don't read the initial question and it frustrates me how I am constantly asked questions about my question that is CLEARLY covered in the initial Question. I Have been on hold on the phone for some time now, if I get this resolved I will post an answer. It does disgust me how adobe are slowly parring the technical support over to its users.

Need help with Fluid Grid Layout and variable column balance.

I'm using the fluid grid layout. I have multiple columns that are actually fluid grid layout columns done by Dreamweaver. I'd like them to extend as high as each other (all to the maximum height of each other) within the same section. An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page. On tablet size, it's 2x2 in a square grid. On mobile, they're vertically stacked. I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout. The columns reflow, no problem. But the height of any background and/or border is variable.
Any help on fixing this?
Example at: https://music2help.thoughtburst.net/
The example doesn't have borders or colours, as it looked silly unbalanced. The music2help.css is the only one I'm modifying manually.
Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders. Any help would be hugely appreciated!
Thanks!
mark->

I tried the solution Nancy posted. It altered things, but doesn't seem to do the trick.
Just some quick background. I did HTML from 1994 through about five years ago by hand in vi on *nix systems. I learned HTML through 4.01, and never bothered with XHTML at all. I learned CSS through most of CSS2. The CSS3 and HTML5 stuff is all new to me, but it can't be that hard. I'm not exactly a novice in JS (I've done a fair bit of AJAX programming), but it's not even close to my primary language (I'm a Perl guy).
I'm "stuck on" wanting to use Fluid Grid Layouts. It's billed as one of the selling points of DW CS6, and I really like the concept and results. I just want the results embellished a little, namely with sensible identical heights on grid containers set in the same row, so that you can apply background colours, dropshadows, and borders. That's really all I want to do that it doesn't already do.
I have a test page at: http://music2help.thoughtburst.net/ that you can try with your Quick Columns. I'd be interested to know if you can get it to work.
Here's the catch, though... Resize the browser, shrinking it inwards. (I suggest Firefox, as Chrome only shrinks so far, and you won't get to Mobile width.) As you can see, on a Tablet, one of the columns that should be equal height actually moves up a row and should be equal height with the row that, on a desktop, would take the entire width of the page area. So that's like a 4-up output in printing terms. At Mobile size, the entire thing is vertical, so none of the columns should be resized.
If your product works and can accomodate these conditions, I think I would be interested in spending the $35 it costs.
Let me know? Thanks!
EDIT: Changed URL to be non-SSL. The server has multiple vhosts on it, and I keep forgetting that I don't have a cert on this new one. Sorry about that. You can just add anything to one of the the three middle columns, if you're pulling it down to test.

Problem in Fluid Grid Layout

I am trying to edit an My existing html site with a fluid grid layout. My Layout toolbar doesn't show a fluid grid div widget, and when I go to the 'Insert:Layout' menu, the fluid grid option is also gone. It used to be there. How do I get it back? I'm dead in the water until I figure this out.

Screenshots don't tell us if your code is actually in a fluid grid layout. My guess is not which is why the icon is not displaying.
Nancy O.

Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

Problem with ALV GRID layout

Hi friends
really need yours help
I have to show an ALV grid with checkbox as first column.
This checkbox is based on internal table condition may be enabled or disabled, other columns are disabled.
I used the structure 'ZMESD' where i decleared that checkbox field.
I called function module:
CALL FUNCTION 'REUSE_ALV_FIELDCATALOG_MERGE'
    EXPORTING
      i_structure_name   = 'ZMESD'
      i_bypassing_buffer = 'X'
    CHANGING
      ct_fieldcat        = it_fieldcat[].
x_fieldcat-seltext_s = 'CheckBox'.
x_fieldcat-checkbox = 'X'.      " Display this field as a
x_fieldcat-edit      = 'X'.     " You can specify the width of a
MODIFY it_fieldcat FROM x_fieldcat TRANSPORTING seltext_s checkbox
edit WHERE fieldname = 'CHK' .
Now the problem is, I want to use
"REUSE_ALV_GRID_DISPLAY", where I am using
is_layout = x_layout
and value of x_layout is filled based on condition as follows
LOOP AT gt_grid INTO ls_outtab.
    DATA l_tabix TYPE i.
    IF ls_outtab-status = 'Reserved'. "This is the condition for which checkbox is disabled
      l_tabix = sy-tabix.
      REFRESH lt_edit.
      ls_edit-fieldname = 'CHK'.
      ls_edit-style = cl_gui_alv_grid=>mc_style_disabled.
      ls_edit-style2 = space.
      ls_edit-style3 = space.
      ls_edit-style4 = space.
      ls_edit-maxlen = 10.
      APPEND ls_edit TO lt_edit.
      APPEND LINES OF lt_edit TO ls_outtab-handle_style.
      MODIFY gt_grid INDEX l_tabix FROM ls_outtab TRANSPORTING
                                        handle_style .
    ENDIF.
ENDLOOP.
Now I finally i m using:
<b>x_layout-lights_tabname = 'handle_style'.</b>
but its giving dump.
I am sure its only because i havent found the corrosponding X_layout field for 'handle_event'.
Please help me, as its urgent.
Points ll be awarded for sure.

Thank you friends
I got the answer.
I used function module
CALL FUNCTION <b>'LVC_FIELDCATALOG_MERGE</b>'
   EXPORTING
I_BUFFER_ACTIVE              =
     i_structure_name             = 'ZMESD'
I_CLIENT_NEVER_DISPLAY       = 'X'
     i_bypassing_buffer           = 'X'
I_INTERNAL_TABNAME           =
    CHANGING
      ct_fieldcat                  = it_fieldcat[].
EXCEPTIONS
INCONSISTENT_INTERFACE       = 1
PROGRAM_ERROR                = 2
OTHERS                       = 3
Its solved the problem

PLEASE LET ME KNOW IF THIS IS POSSIBLE WITH FLUID GRID LAYOUT?

This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

I'm perplexing by your question. How do you expect the divs to move in other resolutions? For the question to be whether this is possible with a fluid grid there has to be some transformation between the layouts. If you are just looking for a static layout, that is possible. If the heights are to be fixed like that you could just specify the heights on the divs to make the height. If the divs are moving down then add the attribute clear:none; to the div, in this case 2 and 4. This will prevent the float from being cleared and pushing the element down.

Re-sizing images in fluid grid layout (responsive site design)

I have an image that I placed in dreamweaver cc. It scales great in all deives and browsers. The thing is I want to make some small ajustments with its height in the differant devices and when I do so in one device it screws everything up in all the others terribly.

Mr.adobe2341 wrote:
I have an image that I placed in dreamweaver cc. It scales great in all deives and browsers. The thing is I want to make some small ajustments with its height in the differant devices and when I do so in one device it screws everything up in all the others terribly.
Throw us some code.......preferable a link url to what you have so far.

How can I set the New Tab Page so that it only shows my Bookmarks (Like chrome) and not the history ?

Hello, I've recently installed Firefox on my new PC after giving Chrome yet another chance (I've had bad experiences with it) and after seeing crashes everywhere I just gave up. I'm a long-time Firefox user but I've never been able to figure out how to prevent the New Tab Page from showing the Browser's History.
Is there a way to make Firefox show Bookmarks and Folders on the NTP instead ? Also, is there a way to make the Bookmarks bar show on the New Tab Page ONLY ?

The about:newtab page shows pages that you have visited. So if you visit a page by clicking a bookmark then that bookmark will become a history item and will thus appear in one of the tiles on the about:newtab page.
If you want then you can customize the tiles and drag bookmark (and history) items in a specific tile to pin that web page to that tile.
You set the number of rows and columns that appear on the about:newtab page by modifying these prefs on the about:config page via a double-click.
*browser.newtabpage.columns (3)
*browser.newtabpage.rows (3)
See also this article about the New Tab page (about:newtab):
*https://support.mozilla.org/kb/new-tab-page-show-hide-and-customize-top-sites

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.

Fluid Grid Layout Alignment Issue

I'm using Dreamweaver CC Fluid Grid Layout. This is my first time using Dreamweaver, (and first time posting to Adobe Community) so I don't have a ton of experience. Somehow, the whole body of all my pages has been aligned left and I can't find anywhere in the CSS or the HTML of the individual pages that would make it do so. I even tried inserting a body: align: center in the CSS and also in the HTML of each page and it just won't respond. Does anyone have any ideas? I'd really REALLY appeciate some help with this because I'm totally at a loss. Below is my CSS and the HTML for my index.html .
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%;
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          12;
          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/
.fluid {
          clear: both;
          margin-left: 0;
          width: 100%;
          display: block;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          float: left;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 86.45%;
          padding-left: 2.275%;
          padding-right: 2.275%;
          clear: none;
          float: none;
body {align-content:center}
#top {
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 600;
#top {
          background-color: #1f1f1f;
#mainnav {
          background-color:#1F1F1F
#menuSystem {
.menuItem {
          margin-top: 9px;
          margin-bottom: 2px;
          padding-top: 2px;
          padding-bottom: 2px;
          text-align: center;
          color: #FFFFFF;
          background-color: #1f1f1f;
          width: 100%;
          clear: both;
          margin-left: 0;
          padding-left: 0px;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          letter-spacing: 2pt;
          text-transform: uppercase;
.gridContainer.clearfix #top h1 {
          color: #FFFFFF;
          font-family: fredericka-the-great;
          font-style: normal;
          font-weight: 400;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 5pt;
#hero {
h2 {
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: center;
          margin-right: 0%;
          margin-top: 10%;
          text-decoration: overline;
          color: #FFFFFF;
#footer {
          background-color: #1F1F1F;
          color: #FFFFFF;
          text-align: left;
#wrapper {
          background-color: #2D2D2D;
          font-family: source-sans-pro;
          position: static;
          display: inline;
#childpageimage {
          width: 59%;
          padding-top: 0px;
          padding-bottom: 0px;
          padding-right: 2px;
#content2 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 400;
          text-align: left;
          text-indent: 0px;
          padding-left: 10px;
          padding-right: 10px;
          width: 100%;
          clear: both;
          margin-left: 0;
          float: left;
contentgallery {
          color:#FFFFFF;
table {
          color: #FFFFFF;
          font-family:source-sans-pro;
#childpageimage2 img {
          width: 50%;
          float: left;
          top: 0px;
          padding-top: 5px;
#content3 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: left;
          padding-left: 10px;
          padding-right: 10px;
#contact {
          width: 100%;
          clear: both;
          margin-left: 0;
          float: right;
#contenttitle {
          width: 100%;
          color: #FFFFFF;
          text-decoration: overline;
body {align-content:center}
#content {
          width: 100%;
          clear: both;
          margin-left: 0;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* 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%;
          clear: none;
          float: none;
          margin-left: auto;
a {
          color:#FFFFFF;
          text-decoration:none;
a:hover {color:#843F93;
#top {
#mainnav {
#menuSystem {
.menuItem {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
#hero {
#footer {
#wrapper {
position: static;
#childpageimage {
width: 100%;
#content2 {
width: 100%;
clear: both;
margin-left: 0;
#content3 {
#contact {
          width: 10.2564%;
          clear: both;
          margin-left: 0;
#contenttitle {
width: 100%;
#content {
width: 100%;
clear: both;
margin-left: 0;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* 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.5%;
          max-width: 1232px;
          padding-left: 0.75%;
          padding-right: 0.75%;
          margin: auto;
          clear: none;
          float: left;
          margin-left: auto;
#top {
#mainnav {
#menuSystem {
.menuItem {
          width: 23.7288%;
          margin-left: 1.6949%;
          clear: none;
#hero {
#footer {
#wrapper {
          position: relative;
          height: 0%;
#childpageimage {
          width: 49.1525%;
#content2 {
          width: 57.6271%;
          font-size: large;
          margin-left: 1.6949%;
          clear: none;
#content3 {
#contact {
          width: 6.7796%;
          margin-left: 1.6949%;
          clear: none;
#contenttitle {
width: 32.2033%;
#content {
width: 40.6779%;
margin-left: 1.6949%;
clear: none;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
index.html
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kate Farrow</title>
<style type="text/css">
body {background-color:#1F1F1F;} </style>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluidgrid.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default;fredericka-the-great:n4:default. js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix"><div id="wrapper" class="fluid">
<header id="top" class="fluid"><aside id="contact" class="fluid">
    <div align="center"><a href="http://www.linkedin.com/in/farrowkate" style="text-decoration:none;"><span style="font: 80% Arial,sans-serif; color:#0783B6;"><img src="http://s.c.lnkd.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="40" height="30" alt="View Kate Farrow's LinkedIn profile" style="vertical-align:middle" border="0"></span></a></div>
</aside>
    <h1 align="center">Kate Farrow</h1>
    <nav id="mainnav" class="fluid">
      <div align="center">
        <ul id="menuSystem" class="fluid fluidList">
          <li class="fluid menuItem zeroMargin_desktop zeroMargin_tablet"><a href="index1.html">Home</a></li>
          <li class="fluid menuItem"><a href="about.html">About</a></li>
          <li class="fluid menuItem"><a href="work.html">Work</a></li>
          <li class="fluid menuItem"><a href="resume.html">ResumÉ</a></li>
        </ul>
      </div>
    </nav>
</header><div id="hero" class="fluid"><img src="140210_Kate_044.jpg" alt=""/></div>
<div id="contenttitle" class="fluid">
    <h2>Who am I?</h2>
</div>
<article id="content2" class="fluid">
    <p>My name is <strong>Kate Farrow</strong>. </p>
    <p>I’m a creative spirit with a great imagination, a passion for writing, and a knack for web strategy. Check out my work to see what I’m talking about.</p>
</article>
<footer id="footer" class="fluid">
    <p> </p>
    <p>© Kate Farrow 2014. Photography © L. Farrow and J. Sandhu</p>
    <p> </p>
</footer>
</div></div>
</body>
</html>

The "align" attribute is obsolete. See centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
FluidGrids are for experienced web designers who already understand the core concepts of HTML, CSS and Advanced CSS Media Queries. Don't bite off more than you can chew for a 1st project. Start with a stable, fixed-width layout. When you become proficient with that, then you can take on more challenges.
Go to File > New > Blank page > HTML. Select a layout from the 3rd panel. Hit Create.
Creating your first web site in DW - (5-part tutorial)
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.

Business Catalyst or Cartweaver with fluid grid

I'm considering a dreamweaver ecommerce site for my art business. So far, I'm trying Shopify and love the easy ecommerce software, but HATE the design limitations. It simply makes me claustrophobic.
I've had success mocking up designs with the fluid grid, and incorporating all the cool features I want. However, it's the opposite situation. Ecommerce seems detatched and probably difficult.
Should I look to Business Catalyst or something like Cartweaver? Are either of these compatible with the fluid grid layout? I only want responsive, and refuse to use a template.
I basically want a system that can manage products and orders similar to Shopify, but without the creative limitations.

Cartweaver can plug into most any design and it could with some CSS tweaking work within a responsive design. The advantage is it is made to fit into a developers design and not force some pre-conceived template or design on you. The formatting that is used for the store elements is controlled by CSS so you can change and adjust it as needed... alos, while using an Extension id Dremweaver to be installed - it is not dependent on this, we removed all that when we saw where Adobe was going with Server behaviors in Dreamweaver CC - so once placed in your site it's all just regular html / css and php or CF - no special Dreamweaver or non standard tags or comments to get in the way.
That being said, are the cart / store elements 100% responsive design out of the box? No. The search results feature, that displays products based on the user's search has the number of columns and row controls via an entry in the web based admin - so it doesn't auto collapse the way a true responsive design would. and the product details pages display isn't "collapsible" - But this could be simply over written to ignore this setting and user your CSS. So with some tweaking you could be ready to go.
We know that responsive design is becoming a bigger requirement all the time so we do intend on updating the presentation side of Cartweaver to support this, we are working on a couple of other cool things that are ahead of this, but it is definitely on our short list to offer this, but in the mean time, it is something that could be tweaked by the developer with a good knowledge of CSS and a reasonable understanding of php or Cf, depending on what version you choose.
The real advantage is the lack of creative restrictions, as well as not being locked into a proprietary hosted solution, those are advantages to consider, and after the initial learning curve you will find that the presentation side can be bent to your will - whatever that may be :-)
Since I want to respect that this is an Adobe forum, if you any other more specific questions I'll be happy to answer them directly offline. You can pop me an e-mail if you like at
lawrence - at - cartweaver dot com
Lawrence Cramer - *Adobe Community Professional*
http://www.Cartweaver.com
PHP & ColdFusion Shopping Cart for Adobe Dreamweaver
Stay updated:
http://www.facebook.com/cartweaver
http://www.twitter.com/cartweaver
http://blog.cartweaver.com

Problems with fluid grid layout live site only showing phone view in Chrome and Firefox Feb 2015

Similar Messages

Maybe you are looking for