Inspiring

Question

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

Forum|Forum|12 years ago
August 6, 2013
1 reply
14425 views

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.

This topic has been closed for replies.

BenPleysier

Community Expert

Please supply a link to the site.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

N

NaviB2Author

Inspiring

Hi Ben,

Thanks so much for your reply! I am not finding many people who are trying out the DW CC responsive design so I really appreciate this.

Here is the link to the page with the responsive template attached to it. For some reason it is no longer centered so it looks like the auto right auto left is no longer working. http://rangsgraphics.com/Home

The responsive template is only applied to this one webpage, which is a duplicate of the home page. If you click on any menu links, you will be on a webpage with the current template which has a wrapper, auto left auto right, containing divs at fixed width floating left. The old way that I need to move on from!

I also remember now that I put a right hand margin on the body to try and line it up with the header, which I know is wrong, but I couldn't work out how else to change it. However, you can see that the BC menu is expanding out to the full width of 1252 px wide.

So its back to my question - how can I set the PC version of the responsive site to 960 px as the max width? It looks like 1252 is set in concrete in DW CC at the moment. If that is the case, I guess I can do all website designs for clients at that max width and export the images for the design at that width.

N

NaviB2Author

Inspiring

MaryBlight wrote:
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.
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.

I think you are missing the point here. The idea of responsive design is to resize the window according to the user's preferences. The number 1232 is the maximum window size; The minimum size is 769px; It depends on how much the user resizes his window.

Having said this, in my perpetual license version of CS6, there is a template for this in the folder:

<C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout>

Look for a file called: FluidGridLayout.htm. It says:


/* 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: dw-layout-width-desktop-value;
 max-width: 1232px;
 padding-left: dw-outer-gutter-desktop-value;
 padding-right: dw-outer-gutter-desktop-value;
 margin: auto;
}

Perhaps changing the value here might do the trick. I haven't tried it yet but might do it when I get time later this evening. I don't use Dreamweaver CC so I don't know if there is a similar template that can be changed. The instructions only say:

BuiltIn
Templates for creating a variety of documents, including different page layouts.

Hope this might just work for you. Please post back if this did not so that this can be ruled out from possible solutions.

Good luck.

Hi there myTax,

Thanks so much for this reply.

In the DW CC code there is something similar. However, the DW CC tutorials say that you can look but not touch as far as the code goes. Normally I would just get in there and start typing, but the tutorials saying not to do this made me hesitant to do this.

On the third go at setting up the design in DW CC I thought what the hell and I did change the 1232px setting to 960px in several places in the code. This didn't break the code, luckily, but it also did not fix the problem. The header was still wonky. So I either didn't find everywhere in the code that set the max width at 1232px or changing the code has no effect. I wil have to experiment more on that one.

I thought I was making a simple point about maximum image size to export the header background for the site.

At the moment the header image for the site was exported as 960px, and as max width for the responsive design in DW CC is 1232px and doesn't appear to able to be changed easily, the header image sits over to the left of the overall site layout as the background image is simply not wide enough. The image does scale down very nicely to tablet and phone size, but the pc version is not right.

It is no biggie, I can go back and export the image at 1232px instead, as the original design in PS is set to 300dpi so I can export the image at a larger resolution at 96dpi and it will be fine.

It has been an interesting journey, and now I know that about the 1232px max width I can design accordingly if I want to do a responsive site in DW CC. I am quite sure that at some stage this max width will be able to be changed, but it does not look adjustable at the moment. I can see it is early days.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded