Cs6 fluid grid layout wide-screen resolution issue

Hi all, I've done some poking around but have not found anything that answers this question - if I missed something please pass me the link!
So I'm doing a new site in cs6 with fluid grid layouts. It's fine in terms of screen sizes, that is, small medium large, but different resolutions make the content appear differently. Specifically on desktop size screens with wide-screen resolutions (eg 1600X1200) the content is squeezed up towards the top of the page. The background image is fine on all resolutions - fills the screen - but the content on top changes according to the resolution. On my screen (1600X900) there's a nice distribution of content vertically. Is there any way to make it so that the content adjusts for resolution, not just size? Thanks in advance.

What I'd like is for the widescreen view not to change the vertical distribution. That is, on my screen the content fills about 3/4 of the screen, which looks fine. On widescreen resolution, it barely covers 2/3 and it looks top-heavy - users I've asked with widescreen resolutions have said "it looks squished towards the top, why don't you move it down?". I guess I don't understand, if height as well as width is determined in percentage, why this happens (that lack of understanding could reveal my fundamental lack of understanding of aspect ratio/mathematics in general ).
I suppose I could give a bigger margin at the top to move the content down the page in all cases, but on my screen, not widescreen, that's not ideal. And I'm hoping there's a way to adjust for widescreen without affecting all resolutions.

Similar Messages

CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using).
I am building a site with fluid grid layouts so it is properly sized across all decices. I have inserted a spry horizontal menu as my primary navigation. I got the menu to look like I want it as far as formatting goes.
But when I view the page live and change the size of my browser, the menu wraps around to the next row, even with fairly large browser windows.
Can anyone tell me how to scale the spry menu bar the same as an image does in a fluid grid layout?
Thanks,
Steven

Don't use Spry Menus. #1 they're not Responsive. #2 They don't work all that well on Touch Screen devices. #3 Adobe abandoned the Spry framework last year. Is that enough to convince you? See links below for alternatives.
Pop-Menu Magic2 by PVII (commercial DW Extension)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Dreamweaver CS6 Fluid Grid Layout

I fear there may not be a solution to this issue! I have placed several hotspots on an image in a Fluid Grid Layout div in DW CS6 and the problem is quite straightforward. Whilst the "image" reduces perfectly when viewed in Tablet and Smartphone screens the "hotspots" remain in the same position they were at in the Desktop view! The result is the same irrespective of which view you set the hotspots in. Is there a solution to this problem or is it insurmountable?

OK. Let's just paste the script into your HTML page and see if that works.
Open your page in code view.
Replace this:

<script src="fancybox/maphighlight.js"></script>

With all of this:

<script>
// map highlight JavaScript Document
(function(F){var B,C,I,L,K,H,E,G,A,J;B=document.namespaces;has_canvas=!!document.createElement("canvas").getContext;if(!(has_canvas||B)){F.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M){return Math.max(0,Math.min(parseInt(M,16),255))};G=function(M,N){return"rgba("+E(M.substr(0,2))+","+E(M.substr(2,2))+","+E(M.substr(4,2))+","+N+")"};C=function(M){var N=F('<canvas style="width:'+M.width+"px;height:"+M.height+'px;"></canvas>').get(0);N.getContext("2d").clearRect(0,0,N.width,N.height);return N};I=function(P,M,S,O,N){var R,Q=P.getContext("2d");Q.beginPath();if(M=="rect"){Q.rect(S[0],S[1],S[2]-S[0],S[3]-S[1])}else{if(M=="poly"){Q.moveTo(S[0],S[1]);for(R=2;R<S.length;R+=2){Q.lineTo(S[R],S[R+1])}}else{if(M=="circ"){Q.arc(S[0],S[1],S[2],0,Math.PI*2,false)}}}Q.closePath();if(O.fill){Q.fillStyle=G(O.fillColor,O.fillOpacity);Q.fill()}if(O.stroke){Q.strokeStyle=G(O.strokeColor,O.strokeOpacity);Q.lineWidth=O.strokeWidth;Q.stroke()}if(O.fade){F(P).css("opacity",0).animate({opacity:1},100)}};L=function(M){M.getContext("2d").clearRect(0,0,M.width,M.height)}}else{C=function(M){return F('<var style="zoom:1;overflow:hidden;display:block;width:'+M.width+"px;height:"+M.height+'px;"></var>').get(0)};I=function(N,Q,R,U,M){var S,T,O,P;S='<v:fill color="#'+U.fillColor+'" opacity="'+(U.fill?U.fillOpacity:0)+'" />';T=(U.stroke?'strokeweight="'+U.strokeWidth+'" stroked="t" strokecolor="#'+U.strokeColor+'"':'stroked="f"');O='<v:stroke opacity="'+U.strokeOpacity+'"/>';if(Q=="rect"){P=F('<v:rect name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+R[0]+"px;top:"+R[1]+"px;width:"+(R[2]-R[0])+"px;height:"+(R[3]-R[1])+'px;"></v:rect>')}else{if(Q=="poly"){P=F('<v:shape name="'+M+'" filled="t" '+T+' coordorigin="0,0" coordsize="'+N.width+","+N.height+'" path="m '+R[0]+","+R[1]+" l "+R.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+N.width+"px;height:"+N.height+'px;"></v:shape>')}else{if(Q=="circ"){P=F('<v:oval name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(R[0]-R[2])+"px;top:"+(R[1]-R[2])+"px;width:"+(R[2]*2)+"px;height:"+(R[2]*2)+'px;"></v:oval>')}}}P.get(0).innerHTML=S+O;F(N).append(P)};L=function(M){F(M).find("[name=highlighted]").remove()}}K=function(N){var M,O=N.getAttribute("coords").split(",");for(M=0;M<O.length;M++){O[M]=parseFloat(O[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),O]};J=function(O,N){var M=F(O);return F.extend({},N,F.metadata?M.metadata():false,M.data("maphilight"))};A=function(M){if(!M.complete){return false}if(typeof M.naturalWidth!="undefined"&&M.naturalWidth==0){return false}return true};H={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;F.fn.maphilight=function(O){O=F.extend({},F.fn.maphilight.defaults,O);if(!has_canvas&&F.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var N=document.createStyleSheet();var M=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];F.each(M,function(){N.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var U,R,Y,Q,T,V,X,S,W;U=F(this);if(!A(this)){return window.setTimeout(function(){U.maphilight(O)},200)}Y=F.extend({},O,F.metadata?U.metadata():false,U.data("maphilight"));W=U.get(0).getAttribute("usemap");Q=F('map[name="'+W.substr(1)+'"]');if(!(U.is("img")&&W&&Q.size()>0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();F(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=F("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(F(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(H).remove();if(F.browser.msie){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);F(T).css(H);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=J(this,Y);if(!b.neverOn&&!b.alwaysOn){a=K(this);I(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+F(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=J(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=K(this);I(T,e[0],e[1],f,"highlighted")}}})}if(!has_canvas){F(T).append("<v:rect></v:rect>")}}};F(Q).bind("alwaysOn.maphilight",function(){if(V){L(V)}if(!has_canvas){F(T).empty()}F(Q).find("area[coords]").each(function(){var Z,a;a=J(this,Y);if(a.alwaysOn){if(!V&&has_canvas){V=C(U.get());F(V).css(H);V.width=U.width();V.height=U.height();U.before(V)}a.fade=a.alwaysOnFade;Z=K(this);if(has_canvas){I(V,Z[0],Z[1],a,"")}else{I(T,Z[0],Z[1],a,"")}}})});F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){L(T)});U.before(T);U.addClass("maphilighted")})};F.fn.maphilight.defaults={fill:true,fillColor:"00CC00",fillOpacity:0.3,stroke:true,strokeColor:"99FF33",strokeOpacity:0.5,strokeWidth:2,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true}})(jQuery);
</script>

Save. Upload to server.
Nancy O.

CS6 Fluid Grid Layouts - opening CSSTransitions panel crashes program

Hi there, I'm on my second web page and this old problem has come up again.
I've asked about this before but I'm afraid I never got to the end of it, I just worked around it.
After I open the transitions panel, I then press the + button, then it crashes. Here are the error messages:
Does CSS Transitions work in Fluid Grid Layout? Thank you.

This aging mind gets very easily confused, so please bear with me.
In reply #3, I gave you an answer to you not being able to find the file to delete as in reply #2. Ticking the box next to 'Hidden Items' will allow you to find that file. By default it would be hidden. Ticking the box will not delete the cache file. For that to happen, you need to follow the process as set out in the link supplied in reply #1.

CS6 Fluid Grid 960px wide

I'm just getting started with the fluid grid in CS6 but need a bit of help. I'm set up with 12 columns and the default desktop width is 1232px according to the options box. I don't want the grid to be 100% wide. In fact I want it no bigger than 960px at its max width. That works out to be approximately 78% (77.9) of 1232px. However, if I choose 78% as my width and drop in a DIV to span the whole 12 columns, it is far greater than 960px wide. What am I doing wrong and what do I need to do in order to have a starting width of as close to 960px as possible.
Any help is appreciated.

Ok, that was easy. I was trying to avoid making any changes to the default CSS file but I haven't broken anything which is good Thanks.

Fluid Grid Layout - IE Issue with Image Size

Hi,
I've been working on a new website using the CS6 Fluid Grid Layout. My site is working correctly in Chrome and Firefox but in Internet Explorer 9 and 10, and most likely all other versions, the images that resize normall in Chrome and Firefox stay at maximum size in Internet Explorer. Please could somebody take a look at my site and see where I have gone wrong in the code as I can't find the problem anywhere.
www.moleseyhire.com/index2.html
Kind regards,
Mitchell Ransom

You could set the <divs> up like:
<div id="special_1"><img src="http://www.moleseyhire.com/images/offer-1.png" alt="33% Off Shampoo"></div>
<div id="special_2"><img src="http://www.moleseyhire.com/images/offer-2.png" alt="Multi Hire"></div>
    <div id="special_3"><img src="http://www.moleseyhire.com/images/offer-3.png" alt="Multi Buy"></div>
    <div id="special_4"><img src="http://www.moleseyhire.com/images/offer-4.png" alt="10% Off Tile Cutter Accessories"></div>
Then add
#special_1, #special_2, #special_3, #special_4 {
    width: 24%;
    float: left;
    margin-right: 1%;
To the following media queries:
@media only screen and (min-width: 769px) and @media only screen and (min-width: 481px)
and:
#special_1, #special_2, #special_3, #special_4 {
    width: 49%;
    float: left;
    margin-right: 1%;
to the following media query:
/* Mobile Layout: 480px and below. */

Background images in fluid grid layouts Dreamweaver CS6

How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other.

Text size fluid grid layout

I am using Dreamweaver cs6 fluid grid layout. Is there a way to change the text size for the different layouts? For example I would like the header text to be 16px on the desktop but only 12px on the mobile.
Thank you!

This makes sense although I have not been about to make it work. Should each of these be inserted into the corresonding device section of the css? Thank you for your help!
/* Mobile Layout: 480px and below. */
/*Special Rules for Mobiles*/
@media only screen and (max-width: 480px) {
          body {font-size: 75%}
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 88.626%;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/*Special Rules for Tablets*/
@media only screen and (min-width: 481px) {
          body{font size: 100%;}
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 91.4836%;
          padding-left: 0.7581%;
          padding-right: 0.7581%;

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 layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

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

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

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

How to 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.

Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"

In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while viewing those three columns comes down one by one..........but works well in wide screen......is there any problem in the size of the monitor..........

Here is the link to the tutorial......
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
It doesnot work well in Internet Explorer 8....What to do for the responsive site to work well in all the older versions of IE....

Fluid Grid Layout CS6

Hi Guys,
First post here so I might be in the wrong place so please let me know if I am and point me to where I should be! Thanks.
So I've been developing a new site using CS6 with the Fluid Grid Layout system, everything has been going great until all of a sudden the fluid grid system disappears, at first I thought I had disrupted the code too much with my custom CSS though I rolled back the file to a version that was working perfectly and yet the fluid grid system is still no where to be found. I guess I hit a hotkey that turns the function on and off though I cannot for the life of me find what it is. I've tried closing the file and opening again, shutting down dreamweaver completly and even restarting my pc with no effect.
If anybody could help me with this issue I would be very grateful!
Kind regards,
Mitchell Ransom

View > Visual Aids > Fluid Grid Layout Guides.
Window > Multi-screen Preview.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Fluid grid layout issues

trying my hand at thsi fluid grid layout thing and am having a few issues. part of the problem is i may just be trying to do too much, making an ecommerce site and the page has quite a few div's in it, a header, description, picture, cart, and price div per each item. the layout looks fine in the mobile view but i can't get the divs to match up in the tablet and desktop view.
i know there are other programs like bootstrap out there, but just not sure if they are going to run into the same issue. the simple fix would be just to create each of these items in photopshop and then each item would just be one div, instead of 5. but then the issue becomes i create the size of each item for the mobile view, but by the time it gets to the desktop view the quality of the image is going to be crummy.
the final option would be just to get another url and build that page for mobile, and have a link there on the page to view full site and just direct it to my url that has the desktop site up and running, and do vice versa on the desktop site.
HELLLLLPPPPPPPP! any advice or direction would be appreciated.
my url is http://www.coloredfortunecookies.com if you want to see my issues. you can play with the screen size in your browser and see all looks great in mobile view, but not the other.
thanks!

I just think you're tying to put too much stuff into this. The best Responsive Web Designs are very clean and uncomplicated. See example below:
http://alt-web.com/FluidGrid/Fluid-4.html
Basically no floats in mobile
2-floated columns in tablets
4-floated columns in desktops.
Nancy O.

Cs6 fluid grid layout wide-screen resolution issue

Similar Messages

Maybe you are looking for