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.

Similar Messages

The iPhone 5 in landscape mode is a tablet for the Fluid Grid layout

Hi all,
I created a "fluid" layout for a site and realized that the iPhone 5, in landscape mode, is > 480 pixels, so the "tablet" layout is applied.
Have you encountered this issue as well? How to solve it? I thought I might modify the CSS media query and define the tablet as > 536 but maybe some-one has a more elegant solution?
And, in general, when is a phone really a tablet?
Bootstrap from Twitter suggests four types of widths.
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
In this framework (which is very similar to DW's fluid grid: it has a class called "clearfix" which suggests me something), under 768 it's still a phone... Is IT? What do you think?

Smartphones are getting bigger. Tablets are getting smaller. So there's bound to be some overlap between devices. I just don't see this as a problem. Nor should you.
Nancy O.

Dreamweaver CC fluid grid, can I change the position of DIV's based on Mobile, Tablet, Desktop view?

Hi all,
Currently working on my first Dreamweaver CC fluid grid / responsive site. I want to optimise the pages layout for Mobile, Tablet and Desktop.
I can see that I can hide individual div elements by adding "display: none;" to the mobile media query code in the CSS.
I am wondering am I able to change the position of DIV's in relation to the order of each other some how using a similar way?
Eg I have a webpage design for desktop like.
Title
Nav
Description
Buy Button
Photo
On mobile I'd like to be able to bring that Photo up towards the top of the layout eg.
Title
Nav
Photo
Description
Buy Button
I was hoping those up and down arrows you see in the Dreamweaver CC interface was going to some how make the changes to each view Mobile, Tablet, Desktop, but all that is doing is moving the position of code in the HTML amoung each of the main DIV sections.
Or am I at the point where I will need to create a seperate page for mobile only to make a layout change like this?
Any help would be great

Hi Complexity,
I have got some further info, and if I have lead you astray I am sorry.
I don't think you can change the order of the divs in a responsive layout in DW CC.
However, you can arrange the divs to sit under or beside each other differently in each of the layouts, for pc, tablet or phone.
You can also switch divs off and on in each of the layouts, having them display in one size screen and not in another.
So what you would need to do is to create a couple of nav divs, if you want a nav at the top of one type of screen and one at the bottom. You could duplicate the content in both of them and switch one on in one layout and one off in the other.
I hope this helps!
I am doing my first layout for a client using DW CC responsive layouts. I have done two test/hobby sites already.
It is a bit of a mission learning it but I am getting there.
I do find it interesting that most people recommend using other programs to do responsive rather than Dreamweaver's fluid grid layouts. I don't think many people are using it yet.
Regards,
Mary

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

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

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.

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

Can you build mobile websites in Adobe CS6 Muse similiar to fluid grid layout?

Can you build mobile websites using Adobe CS6 Muse, similar to fluid grid layout?

You can certainly use Muse for hosting on other hosts as well. You do lose some of the functionality of Business Catalyst such as In Browser Editing. I just saw that you did your current one in Wordpress ... so I assume there is a blog?
If so, keep in mind that Muse alone does not have a blog feature. You can integrate a Business Catalyst Blog into it with a bit of knowledge on how BC works.
A couple videos you will want to check out are:
https://my.adobeconnect.com/p843w8dk0w9?launcher=false&fcsContent=true&pbMode=normal
and especially;
https://my.adobeconnect.com/p6wv1sik1gq/?launcher=false&fcsContent=true&pbMode=normal

Dreamweaver css rules and bc templates for viewing phones, tablets & desktops

How do I connect css rules for phones, tablets and desktops to work with Business Catalyst for all viewing on all 3

I've never used BC myself. But I would imagine it's the same for any project you develop in Dreamweaver. Do you have 3 external CSS files yet? Are you using Media Queries in the <head> of your documents?
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Mobile media query adjustments effecting desktop - Fluid Grid Layouts

Why do css changes in mobile media queries cascade through to the desktop view, and where is the freakin manual for all this stuff? I still can't get my head around why anyone would want this. Mobile is the least of my concern, as it's less than 12% of my traffic. Desktop first! Any help?

First off. Watch your mouth Ben. We are Adobe customers. This is s Dreamweaver forum, correct? Where's the desktop first method in Dreamweaver?
So you're saying how can design be more important that the user experience??? BECAUSE IT STARTS WITH DESIGN.
I have spent countless hours working directly with Adobe and many others in an effort to help answer some of these FGL Dreamweaver questions,a and maybe help create some useful workarounds. Nancy has helped me with several things successfully in the distant and recent past and I do appreciate her efforts. I think I said that.
Did you just want pick out one tiny insignificant thing and use the forum to come beat me up?
Second, where were you when this question was asked previously? (and not only by me) Now all of the sudden, you chime in with more redundant information.
Third, this topic is widely discussed everywhere and is often frequent frustration by many skilled designers and developers. Why are we doing this?
Fourth, if a clients mobile traffic is less than 15-20%, mobile is not my focus, but responsive is. And Dreamweaver is our tool.
With that said, I don't prefer that mobile media queries override my desktop media queries. But I do respect the mobile user experience.
We survey all of our customers. So far, about half of them have said that they prefer the desktop site on their mobile devices, and hate most mobile sites, and get angry when there's not option to view the desktop site. We are currently working on a switch for this. So there goes 50% of those "user experiences" Another large percentage doesn't care. And a select few do. But I think it depends on the site. If it's your bank, you want mobile. If it's a wedding planner, a desktop will win out. These are real numbers. Not some Hype.
Im not understanding how mobile media queries overriding desktop is useful when using Dreamweaver/html5boilerplate for a simple responsive design. (unless there's something am missing) We have used the program for over 10 years now, and will continue to use all Adobe's products and realize it's work in progress.
Would you please post some of your web work. Maybe I can learn the answers from you. Or a portfolio.
OR maybe you can answer a question specifically. display:block is overriding desktop display:anything.

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.

How to make regions editable in fluid grid template in 2014.1.1 in LIVE view - can't open the template editable selection panel

I am teaching a course in Dreamweaver 2014.1.1
We are setting up templates in fluid grids.
We need to make regions editable.
The LIVE view replaced the DESIGN view and does not have certain options accessible anymore.
I can't find the command to access the dropdown panel to make a region editable.
The Template tab at top, and the make editable options subtab, will not come open in fluid grid template mode.
Does anyone have a way to do this?

I was under the impression that the February update (2014.1.1) released a few days ago had fixed these problems. I urge you to file an official bug report below.
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
My advice for now is to stay away from Fluid Grid Layouts. But if that's not an option, I'll show you a trick for getting Design View back. Open the Fluid Grid CSS file and add an X as shown below. This tricks DW into thinking it's a normal layout.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Once saved, you should see Design View as an option.
Nancy O.

Dreamweaver CC fluid grid site, how do I give user the option to view desktop version on mobile?

Hi all, I've just built my first fluid grid site with Dreamweaver CC, just wondering what is the easiest way to give an option to the user to view the desktop version on a mobile device (so they can zoom-in and pinch around and get to see what would be shown on a desktop). My mobile version of the site is a lot different to the desktop. I've kept all the original code structure, css, media quries and use of boilerplate etc intact from the original dreamweaver cc template. If someone could please show the best way to do this would be great

Hi Ben, yes I know but I come across people who insist on using the desktop version of sites because they are more familiar with the layout of the buttons and dont want to relearn etc, I come across this many times on sites I visit myself actually where I don't have time to relearn the navigation of the site because I know the desktop version so well, if in a rush etc.
Hi Mary Blight its definatley possible, I mean I could create a new css file with desktop version only css and use jquery to change the mobile css to this new css file when a user clicks "view desktop button", its just that I must have over 2000 lines of css and about 200 classes thats properties are spread over the 3 different media queries (with different inhertence), and I really don't want to have to manually go through each if I have to.
Was hoping I might be able to use some view port meta tags like how apple does on their devices
<meta name="viewport" content="width=device-width, initial-scale=1"> something like this to fool the device into thinking its a desktop site, or something along those lines etc.

Viewing Mobile vs. Desktop visits.

I have recently launched both a mobile and desktop versions of a website. How can I use the statistics feature of BC to view how many mobile visits I have had compared to desktop visits? I know how to view differences in opperating systems and browsers.
Regards,
Jay

You can get some sort of a desktop vs mobile report by selecting Mobile -> Device Type.
"Other" can be used for identifying "desktop" visits. Technically "Other" is the kitchen sink category for all visits that cannot be identify as Mobile Phone, Tablet, etc.

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

Similar Messages

Maybe you are looking for