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.

Similar Messages

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.

What are the Photoshop design dimensions for Dreamweaver fluid grid layout?

If I were to build a website using Dreamweavers fluid grid layout, what are the dimensions in Photoshop I should be designing with?

FluidGrid Layouts are based on % widths; not fixed pixel widths. As such your PShop design comps will need to be planned with these device widths in mind.
320px - 480px wide = mobile
481px - 768px width = small tablet
600px - 1024px width = large tablet
1024px - 1233px width = desktop/laptop
Nancy O.

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

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.

IPhone keyboard in Landscape Mode

Hey,
Is any one else having the same issue ? Any solution is appreciated. When I use my iPhone keyboard in landscape mode (application - gmail) some of the letters in the keyboard don't pop-up. The keyboard inputs the letters in the mail however the on-screen prompt for a key being pressed (letters jumping up) does not happen. It happens for different letters each time. I have seen 'q' key do that .... r some times etc. It is not just the first row of letters too. I have seen other letters.
I reset the phone, restored it and even got a warranty exchange. I still have this issue. Any ideas ?
Peace...

Link below is the official Gmail Mobile Development Blog. So you may find some contact or feedback info there.
http://gmailblog.blogspot.com/2008/01/new-gmail-for-iphone.html

How can I get my iPhone out of landscape mode and back to portrait?

How can I get my iPhone out of landscape mode and back to portrait? Tilting the phone doesn't work.

Try following - 1 by 1:-
* make sure portrait lock is not on & try turning on/off several times
* turn off mobile and turned it back on
* hard reset by pressing lock and home at same time
If problem persist, you need to try following but be careful since the following impact your iphone.
* resetting all setting: this will reset all settings of your iphone back to factory setting
* resetting all setting by erasing all data: this will reset all setting and erase all data so do back-up and proper syncing and read relevant details
* restoring from itunes: this will also erase all data and take mobile back to day 1
last 3 options are last resort and only be done if you are sure you can restore your data.
Please don't hold me responsible for any data loss while doing last 3 options
Cheers!

Landscape & Portrait in Fluid Grid Layouts

I am quite excited about Fluid Grid Layouts and have seen a few videos on Adobe TV and You Tube.
Can anyone tell me if it takes in to account Tablets and Phones being turned into Landscape view from Portrait.

Nancy ~
I know you orriginally wrote this answer almost 9 months ago but I just found it, I do appreciate your help.
I have designed a fluid grid layout and the mobile layout is VERY different than the other layouts, however, when the iPhone 5 is turned to landscape it transistions to tablet layout.
I am not sure if this is only on the iPhone 5 or other phones too, my wife and I only have iPhone 5s. Is there a way I can change the following code to accomadate the iPhone in landscape the same as a mobile layout in portrait?
          /* Mobile Layout: 480px and below. */
          /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
          /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */

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>

Changing the Fluid Grids Once they have been set up

Hi - I have set up a fluid grid site for a client which has a 10, 20 and 24 grid layout for the three versions.
http://www.discoslough.co.uk
There is a nav bar to the left in each version and the rest of the columns are split evenly.
There's the nav and then a 2 columm layout in the mobile and tablet versions.
There are 3 columns to the right of the nav in the desktop.
At the last minute, the client decided that when a visitor clicks one of his thumbnail pics,
he wants them to see a full size image that goes across the entire width of the page
and is not confined to the width of a single column.
The second problem is similar. The site has been set up so that the mobile version has 2 columns. However, although he is happy to have 2 columns of pics, for example on the index page... He does not want 2 narrow columns of text on, for example, the about us page.
The upshot of all this is that no single layout suits the layout required. Some of his mobile pages
need to be one columm wide and some need to have the existing two columns. Some of the tablet versions are ok with 2 columns, some need just one. Finally, some of the desktop pages are ok with the existing 3 columns, some need to have just one, with an enormous pic filling the entire page.
The website design is at quite an advanced stage and I have already scrapped umpteen versions to get this far.
I have tried creating new pages in various versions with the single column layout. I have tried altering the existing fluid grids on the required pages.
However, it seems that whatever I do alters the layouts on ALL pages not just the ones which need alteration.
Any suggestions how I might get around this problem - I cannot be the only person with, for example, thumbnails which need to expand to full size when clicked.
I am really stuck, running way passed my deadline for completion and I badly could do with some good advice - Many thanks.
Mike Starr

I would ditch the fluid grids and work with something a bit more friendly and flexible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
/* Desktop Layout */
body {
    background-color: #e8e9d7;
#pageWrapper {
    width: 100%;
#header {
    width: 100%;
    background-color: #d4c5ae;
    padding: 25px 0;
    margin: 0 0 20px 0;
#header h1 {
    font-family: "Calisto MT";
    font-size: 48px;
    font-style: italic;
    line-height: 30px;
    font-weight: bold;
    color: #663333;
    text-align: right;
padding: 0 20px 30px 0;
margin: 0;
#header h2 {
    color: #666633;
    font-family: "Calisto MT";
    text-align: right;
    padding-top: 0px;
    padding: 0 20px 0 0;
    margin: 0;
    font-style: normal;
    font-size: 26px;
    line-height: 16px;
    font-weight: bold;
#navigation {
float: left;
width: 15%;
#navigation ul {
    margin: 0;
    padding: 0;
#navigation li {
    margin: 0;
    padding: 0 0 15px 0;
    list-style: none;
#navigation li a {
    color: #666633;
    text-decoration: none;
    display: block;
    font-family: Verdana;
    font-size: 16px;
    padding: 6px 0 6px 15px;
    background-color: #c4c5b5;
#navigation li a:hover {
        color: #e6e6e6;
    text-decoration: none;
    font-family: Verdana;
    font-size: 16px;
    background-color: #998675;
    text-align: left;
#content {
    float: left;
    width: 85%;
    overflow: hidden;
#content img {
    float: left;
    width: 33.3%;
#footer {
    clear: both;
#footerLeft, #footerRight {
    float: left;
    width: 50%;
#footerRight {
text-align: right;
/* screens less than 750px wide */
@media screen and (max-width: 750px) {
#header {
padding: 20px 0;
#header h1 {
font-size: 28px;
padding: 0 20px 15px 0;
#header h2 {
font-size: 18px;
#navigation {
width: 20%;
#navigation li a {
font-size: 14px;
#content {
    width: 80%;
#content img {
    width: 50%;
/* screens less than 480px wide */
@media screen and (max-width: 480px) {
#header {
padding: 10px 0;
#header h1 {
font-size: 20px;
padding: 0 20px 0 0;
text-align: center;
#header h2 {
font-size: 12px;
text-align: center;
#navigation {
    float: none;
width: 100%;
#navigation li {
padding: 0 0 5px 0;
#navigation li a {
text-align: center;
font-size: 12px;
#navigation li a:hover {
text-align: center;
font-size: 12px;
#content {
    width: 100%;
#content img {
    width: 100%;
#footerLeft, #footerRight {
float: none;
width: 100%;
#footerLeft p, #footerRight p {
text-align: center;
</style>
<body>
<div id="pageWrapper">
<div id="header">
<h1>Andrew Stanley Woodworking Ltd</h1>
<h2>Specialist in bespoke furniture and architectural joinery</h2>
</div>

</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="content"><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/bathpanels.jpg" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/conservatory-016.jpg" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/desk07.png" alt=""/>
<img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/kitchen05.png" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/newsquare1.png" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/winerack.jpg" alt=""/>
</div>

<div id="footer">
<div id="footerLeft"><p>Tel : O2O-8533 6199</p></div>
<div id="footerRight"><p>[email protected]</p></div>
</div>


</body>
</html>

Design option missing for Fluid Grid layouts (was:In dreamweaver CC, I created a new fluid grid page, but the options to edit the page...)

Hi, in dreamweaver CC, I created a new fluid grid page, but the options to edit the page are limited to code / split / live. The design optin is missing and I need it to move around the fluid grid to position my elements that I have created.
Thanks

Hi Raymi,
Like Ben suggested, you can vote for the feature using the link provided. From what I understand, the product team is collecting feedback on the limitations of Live View for FG layouts and improving experience on that front. It would help if you could provide a list of limitations with the current workflow.
Thanks,
Preran

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

There is no specific function that turns FGL on or off.
When you say that it has stopped, do you mean that the handles no longer show?
If that is the case, then I think you may have modified the CSS to such an extent that Dreamweaver no longer recognises it as belonging to FGL.
There are a couple of avenues for you
Redo the site and make sure not to touch the FGL CSS
paste the code here so that we can see what has gone wrong.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize, delete, duplicate and move up/ down ability.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
For this reason I cannot build new pages by copying one page to create another.
I have a third style sheet that I use for the navigation styles and h1 -h6 ect. tags. and I am also using a css drop menu, can one of these be the problem?
The css menu I am using has the following script - I goes at the bottom of the html page. Before the closing body tag,
<script>
$(function () {
$("#nav").tinyNav();
</script>
I am also using the following for image control - I place it towards the top of the fluid
grid style sheet.
    box-sizing: border-box; /* Opera/IE 8+ */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
Can some one please help.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
This implies there is something broken in your FluidGrid Layout CSS file.   It could be something simple like a missing semi-colon or curly bracket.   Run your code through the W3C validation tools below to check for errors. NOTE: ignore reported errors in boilerplate.css
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

Has anybody modified the Aperture Web Themes for a Fluid Grid or Responsive Web design

I have had some experience modifigying Apple's WebThemes inside Aperture in
Aperture.app/Contents/Resources/WebThemes
I would like to create or modify an existing Web Theme in order to have my site follow the Fluid Grid principles of Responsive Web design.
Has anybody done this who would like to provide some advice?
Thanks, in advance.

Hi jonfreed77,
People facing similar issue, posted following resolution in another thread recently.
Please give it a try and confirm if they work for you.
8. pcepp,
20 Jun, 2013 8:24 AM in reply to pcepp
Report
I found a solution that worked for me.
I removed all the fonts that Adobe CC installed out of my Library:Fonts folder and just left in the Apple Basic fonts like Arial, Courier etc... Launched Dreamweaver CC and the CSS designer panel works. I have no idea exactly which font it is, or creating the conflict. All I know is that it works great now.
|
9. dogdog63,
20 Jun, 2013 10:11 AM in reply to dogdog63
Report
very strange - I installed Illustrator CC and then I had no more problems with Dreamweaver! No more crashes when close or create files and no more problems with the CSS designer. Error messages during create fluid grid layouts are also gone ...
Michel:
I think I figured it out on the Mac. Be sure that Verdana is activated in Font Book. What tipped me off to this was a warning I was receiving when trying to open After Effects. It was saying that the program needed Verdana for the user interface to work. I thought that maybe Dreamweaver needed Verdana too. Sure enough! Hope this helps you guys.

Footer text-alignment in fluid grid layout and another color in white space, not the body

I'm working in a fluit grid layout. Everythings works almost perfekt. Accept for de alignment in Opera mini. Mini works not with %. So it must be padding, line-height and something else. But then the footer does not stick.
In Opera mini
If i want the footer to stick to for example the bottom. I'm may not use padding in de footer.
De <p> i used for alignment in from the text. Now my footer must have a alignment in the middle of the footer (center). With padding in footer, it wil work, but then my footer will not stick to the bottom anymore.
and i have also another question, about the white spaces in de fluid grid. I don't want to give the header, body, footer another color. But that outside of my website.
With a normal website you give the html and the body grey and the content white. But if i do this with the fluid grid. The content because grey. Is there also a code for.
This is what it must be. It is a example, not for real. But i really want to know the code for it.

I found the wright code for the footer. Thanks a lot. I'm happy.
I'm also searching for a code for max-height. For example one page i have less text, so the page is not filled to the bottom. I want for designing reasons this. So the page is always fitt from header to footer.
It must not scrolled. Just complete for the desktop-computer and laptop. Is there a code for. Because there is already internet-tv and that are big-screens. It must be for all the browser also ie7, ie 6, opera, safari, chrome and more.

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

Similar Messages

Maybe you are looking for