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.

Similar Messages

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)

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>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

Would 100% width on a Fluid Grid Layout be bad for any reason?

I was thinking of setting 100% width on my Fluid Grid Layout (for all media queries) so I wouldn't have to go outside the fluid container for my header and footer bar. Would this be bad for any reason? I feel like they probably preset sizes below 100% for a reason.

If you are talking about desktop version then NO provided you assign margins, paddings and borders to html tags rather than the Divs. This is because borders, margins and paddings are all part of the box model and so the overall width could possibly exceed 100%.
Hope this helps for you to search for box model and how it works on W3C website.
Good luck.

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 Put Pictures anywhere in fluid grid layout??

Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
     <div class="div1">
          insert image here...
     </div>
     <div class="div2">
          insert image here...
     </div>
</div>
Nancy O.

How can I make my footer full width of the screen with a fluid grid layout in CSS?

Any Ideas?
#footer {
clear: both;
color: #FFFFFF;
min-width: 100%; // I have tried max-width and width as well.
margin-right: 0px;
margin-left: 0px;
background-repeat: repeat-x;
background-image: url(/images/footer.jpg);
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;

Move your <footer> tag below the closing .gridContainer </div> tag.
Live example:
Alt-Web :: Fluid Grid Test #4
Nancy O.

How can I create multiple pages, with different layouts to the others, in DW fluid grid layouts?

Hi everyone, : )
I am creating a website using FGL in DW CS6, v12.0 build 5808. I do not have Creative Cloud (do you have to pay to use this service?).
I have created one layout for my home page.
I would like to create several more pages, but I want them to use different layouts (as well as different content).
I tried to do something similar before using 'save as' (this was with a non-FGL), but whenever I changed the original page that I had 'save as'd' from, the layout in all the other pages would change too!
I found a possibility from someone else online suggesting using a template, but have not tried it yet: http://www.linkedin.com/groups/Adding-second-fluid-page-in-119937.S.192422240
I'm a bit scared of breaking everything, as I am new to web design and have had to restart the whole process a few times due to messing up the fluid.css etc and other issues, so I am taking baby steps.
Happy to try whatever's suggested and, while I wait for (I hope) your responses, I think I will try the template thing, but from the reply the person who asked the question gave, it sounds like his subsequent pages changed too, as I mentioned above? *scared* ; )
If anyone can help me with this query I would be very grateful. Thank you! : )

Thanks David.
I tried using different IDs for the other pages, but eventually one of the divs seems to 'break' - it overlaps other divs, or cannot be moved or resized (you can select the outline and it goes blue, but no 'move up a row' or down a row or 'lock to grid' etc icons appear and it can't be drag-re-sized), plus the green overlay disappears (just from that div. I'm aware of how to turn visual aids on and off), so it seems broken. This often seems to happen if you rename a div once it's been created; it does not rename in the layout.css on the right side panel (CSS Styles) in DW and the 'broken' behaviour above is exhibited. Do you know anything about this? Is this the 'edit this doc at your peril' stuff that most tutorials seem to mention? Am I doing something wrong?
I also tried making an FGL and saving out the original boilerplate.css, layout.css and respond.js. Then created multiple new FGLs and each time it created new versions of layout.css (called 'untitled-1', 2 etc.). Once I had created all the FGLs, I deleted all the new boilerplates and untitled.css files. Then restored the original ones and changed the link at the top of each page's html to refer to the same filename (the original layout.css), rather than untitled.css. I thought this might work and it seemed to for a while, but then as I had to add new div names for the sections on each page, it eventually broke (as above).
Anyway, I think you have a good point about different layouts and it occurred to me also while I was exploring and waiting for replies here. I think I will make one layout for all pages and go with that. I have a couple of questions about that though:
1. I think the max number of divs I want for one of the pages is 10, but some pages need less divs. If I only fill e.g. 8 divs on one page, will the other ones be sat there empty? I think they will actually...I guess I'm asking because I have not tried it yet (will do after this) and it takes so long to do this trial and error.
2. If the amount of content in each div is different, e.g. let's say Page 1 has 6 lines of content in div1, but page 2 may have an unlimited amount of content (I will want to add to it in the future). Will this result in the div on page 1 being a huge block of empty space after its 6 lines?
Thanks so much for your help!

DW CC Fluid grid layout how to change px width for desktop layout

Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.

Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

How to convert live website to fluid grid layout

I have an existing live website. How do I convert it to a fluid grid layout?

Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
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
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O.

Background Images in Fluid Grid Layouts

How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div the same way as if I had placed an image into the div? Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents. I use CS6.
Thank you.

In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.
It just means you will have several of this code: <p> </p>
The image will only show the width and the height of layout div that you are working in.
I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.
The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.
I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.
It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.
To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.
Hope this helps

Fluid grid layout guides and elements are suddenly gone

I’m working in Dreamweaver CC and trying to build a fluid grid layout from scratch. Everything works fine for a while then I notice that suddenly all the grid guides are gone, the icon (next to the “Live” button) that allows me to toggle the fluid grid guides on and off is gone, and when I try to insert a new div tag…(within the "gridContainer clearfix" tag), the dialog box that opens does not have the option to “insert as fluid element.” Even when I click within a div in my page, the usual options that surround the div are gone as well. It’s as if Dreamweaver doesn’t recognize the page as a fluid grid layout, but when I preview the html, it is still responsive and looks like it is supposed to.
Does anyone know what could’ve changed that might cause this?
I even called Adobe and the tech support guy told me they are not trained in CSS and could not help me. I would think Adobe would be familiar with CSS… right?
If anyone has any suggestions that would be great?

Sudarshan Thiagarajan
The only template files I changed were the main css that I specify when creating a new FG layout.
I changed this for all three devices within the "style.css" page:
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%; (this is is what I changed on the mobile, tablet and desktop settings)
padding-left: 0.95%;
padding-right: 0.95%;
clear: none;
float: none;
margin-left: auto;
This the dialog box I get when trying to insert a new div (it used to ask me to insert "As a fluid element"

Fluid grid layout won't open

I simply create a new fluid grid layout.. name and save the default css file ...name and save the default first page and upload to my server.
Everything works fine and I am able to work on the page in dreamweaver cc as a fluid grid layout.
But when i close down dream weaver, (even if i do no more than save the two files and dont edit anything else) and reopen dreamweaver cc i can no longer work in fluid grid layout, dreamweaver doesnt recognise the page (default) as fluid grid layout and i cannot see the little button that toggles fluid grid layout on and off.
I have not edited the css file or the page in anyway.
someone suggested i go to visual aids and enable fluid grid guides .... but this does not exist and there is no longer a fluid grid button next to the live view button.
I really need to get this working, fluid grid layouts are useless if you cant edit them after creating them
Here is the default code
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/test2.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div></div>
</body>
</html>
Thanks in advance for any replies

I defined the site, when i imported the site as business catalyst site.
It is there, i have checked all the details are correct and can edit and work on the site as a normal site, I just can't get it to recognise any pages i've created as a fluid grid page after closing and reopening the page.
Yeah I watched the video and that is what im doing, create new page as fluid grid layout, save the css to the root, save the html page to the root, all works fine and i can edit in the fluid grid, the grids there, the little buttons there, the handles to adjust fluid grid propertys there.
But at any point if i close the page and open it again i lose the handles, the fluid grid and the little button and can only edit as a normal dreamweaver page.
I tried to phone adobe support yesterday but gave up after 2 hours of waiting
Cry

Cannot drag divs in fluid grid layout

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

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

How to increase the width of the drop down list box in SSRS multi value parameter

Hi,
I am using SSRS 2012. I have a parameter, which accepts multi value.
The width of the drop down list box is very small, and the user need to scroll to the right to view the complete view of the content in the list box. But, if I don't use multi value then the length is good. Kindly suggest how to I increase the width
of the list box when it set to multi value parameter.
Thanks in advance,
Mahalengam Arumugam

Hi Mahalengam,
After testing the issue in my local environment, I can reproduce it. When the values for a single parameter are too long, the drop-down list of the parameter will automatically enlarge to an appropriate size. While the values for a multiple parameter are
too long, we need to scroll to the right to view the complete view of the content in the list box in SSRS 2008. But in SSRS 2008R2 and SSRS 2012, we can directly drag the black control at the bottom of the list box to control the size.
The following screenshot is for your reference:
If there are any other questions, please feel free to ask.
Thanks,
Katherine Xiong
Katherine Xiong
TechNet Community Support
Hi Katherine,
Thanks for your reply. I understood we need to drag the list box to a maximum size to view the contents.
But, this seems an additional task, i know this is a limitation in the current version of SSRS and hope it will be resolved in the next versions.
Thanks for your efforts,
Mahalengam Arumugam

How to increase the width of the column in Tableview

Hi ALL,
How to increase the width of the column in tableview?I have name column where big name is displaying in rows.Does any one have any idea how to increase the width of the column dynamically in tableview.Please respond its little urgent.
Thanks in advance

Hi Peter,
Here is my Dynpage
package com.ust.jcatotable;
import java.awt.Event;
import javax.resource.cci.MappedRecord;
import javax.resource.cci.RecordFactory;
import com.sapportals.connector.connection.IConnection;
import com.sapportals.connector.execution.functions.IInteraction;
import com.sapportals.connector.execution.functions.IInteractionSpec;
import com.sapportals.connector.execution.structures.IRecordSet;
import com.sapportals.htmlb.DropdownListBox;
import com.sapportals.htmlb.event.TableNavigationEvent;
import com.sapportals.htmlb.page.DynPage;
import com.sapportals.htmlb.page.PageException;
import com.sapportals.portal.htmlb.page.JSPDynPage;
import com.sapportals.portal.htmlb.page.PageProcessorComponent;
import com.sapportals.portal.ivs.cg.ConnectionProperties;
import com.sapportals.portal.ivs.cg.IConnectorGatewayService;
import com.sapportals.portal.ivs.cg.IConnectorService;
import com.sapportals.portal.prt.component.IPortalComponentContext;
import com.sapportals.portal.prt.component.IPortalComponentProfile;
import com.sapportals.portal.prt.component.IPortalComponentRequest;
import com.sapportals.portal.prt.component.IPortalComponentResponse;
import com.sapportals.portal.prt.runtime.PortalRuntime;
public class Display extends PageProcessorComponent {
public DynPage getPage(){
     return new DisplayDynPage();
public static class DisplayDynPage extends JSPDynPage{
     private Object formatFlag;
     public static IConnection connection ;
     private IPortalComponentRequest request;
     private IPortalComponentContext context;
     private IPortalComponentProfile profile;
     private IPortalComponentResponse response;
     private int visibleRow=1;
     TableBean myBean;
     public void doInitialization(){
               response = (IPortalComponentResponse) this.getResponse();
               request = (IPortalComponentRequest) this.getRequest();
                context = request.getComponentContext();
                profile = context.getProfile();
                IPortalComponentProfile profile = context.getProfile();
                Object o = context.getValue("myBean");
                if(o==null || !(o instanceof TableBean)){
                   myBean = new TableBean();
                   setBeanFromProfile(profile, myBean);
                   context.putValue("myBean",myBean);
                 }else {
                   setBeanFromProfile(profile, myBean);
                    myBean = (TableBean) o;
                this.getData();
     public void myOnNavigate(Event event) throws PageException{
          TableNavigationEvent tne = (TableNavigationEvent) event;
          this.visibleRow = tne.getFirstVisibleRowAfter();
          if(myBean!=null)
          myBean.setVisibleRow(new Integer(this.visibleRow).toString());

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Similar Messages

Maybe you are looking for