Dw6 fluid grid layout
trying to make sense of the fluid grid layout.
can you use <div class> in fluid grid layout?
is it best to only insert divs using the fluid grid layout div?
when you insert a new fluid grid div what is the difference between entering a new line or not?
the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
any help would be appreciated!
Ben Pleysier wrote:
It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
<div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style="" data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
I thought we were talking about Bootstrap. No Bootstrap in the above.
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top" onunload="">
No Bootstrap here either.
<div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
large 3 cols offset 0
medium 4 cols offset 1
small 4 cols offset 1
extra small 22 cols offset 2
Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
<div class="col-sm-4 col-sm-offset-1 col-lg-3">
The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
<div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up.
Similar Messages
-
DW6 fluid grid layout issue: writes to page instead of css file
Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit.
Following tutorials and the help files to use the fluid grid layout.
Start a blank page on a new site, which inserts the starter div and new css file
Immediately save page, which also generates/saves ancillary files (js and css).
Remove inner div that's created in order to use my own (have also tried leaving the default one in place and using that)
Insert new div, within the "gridContainer clearfix" div.
Place cursor just after that new div, still inside "gridContainer clearfix" and add new "fluid grid layout div tag", new row.
Following same method, do so again.
Dreamweaver adds the generated CSS code to the actual page instead of the expected div, visibly (minified)....and everything breaks. It does *not* add the code into the CSS file from there on and the only way to have it display the div (which does not show any visual indicators since the CSS is basically lost that would do so, is to CTRL-Z to undo the last step. It undoes the CSS showing as the only content in the HTML file, and *does* show a div with the name I'd given it. If I copy/paste that generated CSS into the fluid css file *then* CTRL-Z, it looks the way it's supposed to, with drag handles, visible indentations and so on.
If I then change div widths or position, it does record those changes in the CSS file, so it appears this is only when inserting new divs after the second one that's a problem (third div inside the container is when it starts choking; none overlap).
This is repeatable, on both desktop and laptop, running the same version. I've tried saving after every div insertion, only saving at the start, code view only, split only...
I've tried searching for someone else having this issue and must not be wording the search properly, can't find anyone else seeing this. It's a weird one.
If anyone can point me to something to try so the workaround isn't needed, it would be appreciated.OK try this workflow.
Create a new FGLayout and SAVE. This will save your CSS file with whichever name you give it.
Switch to Design View. Click on Mobile Display. Build your mobile layout first since this is what everything else is based on.
Insert a few Divs and don't worry about content. Just get the basic Div structure stacked one on top of the other like this:
<div class="gridContainer clearfix">
<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
<div id="div3">
Div 3
</div>
<div id="div4">
Div 4
</div>
</div>
Hit Save and name your HTML file. Do not edit the CSS file. DW will generate the necessary layout code for you.
Switch to Tablet Display.
Grab the right side handles to resize divs and move to row above as desired.
Save often during development.
Switch to Desktop Display and repeat.
Once your layout is built, test media queries by previewing in browsers by resizing viewport
When you are completely satisfied with your responsive layout, begin adding content and use a separate external style sheet for content styles. DO NOT EDIT boilerplate or Layout CSS files as doing so could break your layout.
Nancy O. -
Repositioning DIVs in a DW6 fluid grid layout
I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.
Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between: "article", "interview" and "artwork" (around 6:20 in the video).
The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.
In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00 to 15.20 in the video).
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?eddieduggan wrote:
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?
No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.
The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.
As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed. -
Compare the differences between the "Insert" option for fluid grid layouts in DW CC6 2014 and DW6 CC
Their are differences in the "Insert" menu for DW CC6 2014 and DW CC6. Where can I find training to explain the differences between the "Insert" menu particularly regarding insertion of fluid grid layouts?
I would concentrate on learning the version of Dreamweaver that you want to use and not on learning the differences.
Incidentally, the versions are CS6 and CC.
As a personal note, I would suggest trying Bootstrap instead of the Fluid Grid Layouts. -
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
-
Can I control column color in fluid grid layout?
The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
Is there a way to set a preference for grid column color in CC?
Thanks.NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages -
How can I convert my web page from a fixed width layout to a fluid grid layout?
I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KCHerbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
//regular grid span classes
@for $i from 1 through $large-columns {
.span-large-#{$i} {
width: percentage($i/$large-columns);
// push classes
@for $i from 1 through (($large-columns)-1) {
.push-large-#{$i} {
margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis. -
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. -
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 -
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. -
Div options toolbar not displayed correctly in fluid grid layout
When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.
It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature. -
How to increase the width of the Fluid Grid Layout from 1008px to 1080px?
Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.
While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O. -
DW CC Fluid grid layout how to change px width for desktop layout
Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed. -
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>
<!-- close gridContainer -->
<div id="fullWidth">
Full width section goes here
</div>
<!-- close fullWidth -->
<div class="gridContainer">
Bottom Code Section Goes Here
</div>
<!-- close gridContainer -->
Maybe you are looking for
-
How do I setup shared Exchange mailbox with Mail (Yosemite)?
Hello, we use Office 365 hosting for our mails. Setting up my default Exchange account is no problem at all, just provide e-Mail address, password and let auto discover finish the rest through System Preferences -> Internet accounts. But I also need
-
The problem is detailed above.Emails are sent ok. Thanks
-
Can I daisy chain 2 time capsules together to increase my wired network capability from 3 to 6
I am getting a new TC and would like to use my other one so I can hardwire other networked devices i.e Xbox, playstation, 2nd airport express
-
Hi, I created a project in DVDSP. It builds find and says that formatting was successful. However, when I take it to the DVD player it says, "Cannot play disc." It's funny, b/c it plays on my computer DVD player. During the build, the log said that i
-
Using Adobe Acrobat Pro X I received error code 2148073483 when trying to sign my documents. I am using Windows 8.2.