Eskymo

Well I don't want to disable the pinch to zoom feature - people might want to zoom in on text to make it easier to copy sections etc or to see things in more detail.

your code fixes the iPad landscape display problem but as you've included the bit about user-scalable=no it means users can't zoom in on details etc of the site if they want to so I'd want to take that out - I've just copied and pasted my line of code from several tutorials I've seen online that suggest this is the best to use. --edit-- I took out the bit about user-scalable and still couldn't zoom in on bits, so have had to take out the entire line and revert back to what I had originally, but then I'm back to square one...

I've got this in my head... <meta name="viewport" content="initial-scale=1.0, width=device-width" />

that's why I wanted to use min-width and max-widths in my media queries... to avoid the scrollbar situation...

I can't get the 480px stylesheet to load at all...

it also doesn't help me with the iPad landscape mode using the default stylesheet and having to scroll to see the whole page rather than it fitting on the screen.

oh I see - sorry thicko me - forgot to look at source code - thought you were just trying to illustrate the changing screen widths. However having done so and changed my media queries to the following as suggested: <!-- Main Stylesheet --> <link rel="stylesheet" type="text/css" href="ps-default.css" /> <!-- For Desktop Browsers --> <link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (max-width: 1024px)" /> <!-- 768 wide screens --> <link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px)" /> <!-- 480 wide screens --> <link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px)" /> it doesn't work the way I want it to as between a width of 768px and 1024px and between the width of 480px and 768px you get horizontal scroll and for some reason the 480 stylesheet doesn't load at all. test it for yourself here.

Lovely animated thing there - but I don't see how that helps me with the maths to be honest...

I've now changed this to: <!-- Main Stylesheet --> <link rel="stylesheet" type="text/css" href="ps-default.css" /> <!-- For Desktop Browsers --> <link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" /> <link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" /> <!-- 768 wide screens --> <link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" /> <link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" /> <!-- 480 wide screens --> <link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" /> But still can't get the site to display properly in landscape mode on the iPad - it still uses the default stylesheet, but doesn't fit on the screen. I think maybe my viewport info must be wrong even though I've checked this a million times with loads of different online tutorials... - anyone???????

If I take the media queries out of the stylesheets and use this in my index.html file instead: <!-- Main Stylesheet --> <link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" /> <!-- 768 wide screens --> <link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" /> <!-- 480 wide screens --> <link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" /> It doesn't work - for some reason the background colour changes when viewing in portrait mode on the iPad but the rest of the styles don't load and I get an unstyled page. Don't know what I'm doing wrong here at all.

Just read this article and I don't understand why they would use this media query: <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" /> because surely the iPad in portrait mode and landscape mode should offer a different view of the site?? This is what I've seen in so many tutorials online and why I'm so confused - it doesn't make sense to me at all as iPad in portrait mode should use style targeted for 768px wide and not upto 1024px as that's the height of the screen in portrait mode. Anyway - feel like I'm talking to myself here - so off to bash my head against a brick wall again and try a few other things out....

I feel that I should have to include a media query in my default style sheet that says something like: @media screen and (min-width: 769px) and (max-width: 2000px) { ... } not sure what I would set the maximum width to be though. and then in my 768 stylesheet say: @media screen and (min-width: 481px) and (max-width: 768px) { ... } can anyone help me with this?

Basically I need it to work like this... - desktop browsers with a wdith bigger than 768px and up + iPad landscape (if that fits into that category) to use default stylesheet. - anything that is between 481 and 768 to use the 768 stylesheet - this would target iPad in portrait mode - anything that is between 321 and 480 to use a 480 stylesheet - this would target the iPhone in landscpae mode - anything below 320 would target the iPhone in portrait mode. How do I set the media queries for this? I don't want to target specific devices using "max-device-width" and "min-device-width" - I'd prefer to just use 'min-width' and 'max-width' and then the site will still load OK on desktop browsers if the browser to shrunk down to a small size.

So why then when I turn the iPad to landscape does it load the default stylesheet and the site doesn't fit on the screen?

I think they might be referring to the 'dotty' effect on the image - isn't there a filter in photoshop that applies this kind of look? I don't use photoshop so can't really help. I just found this - is that helpful: http://designertuts.com/258/newspaper-photo-effect http://psd.tutsplus.com/tutorials/tutorials-effects/photoshop-halftone-effect/

Can someone help me out here - doesn't matter how much I read about Media Queries I still can't get my head around what to use in my stylesheets - especially the widths. I want my site layout to change according to the screen width using max and min dimensions set in the stylesheet - but maybe I've got the dimensions for iPad incorrect - I thought that in landscape mode it was 1024px and so would use my default stylesheet - it does but for some reason the site doesn't fit on screen!!! I'm developing a site that is 960px wide - so I have a default stylesheet for this and I've gone through it and turned all the necessary px values to percentages. I've then created a stylesheet for 768px views (e.g. iPad in portrait mode) and will get round to doing a couple more for iPhone portrait and landscape modes. The client is keen for the site to work on iPad and iPhones and so I'm tackling these first. When I view the test page on the iPad - in landscape mode - it loads the default stylesheet, but the site doesn't fit on the screen and I have to scroll left and right to see it all, or pinch it to get it to fit on screen - I thought that a 960px layout would be OK for iPad landscpape mode. What am I doing wrong? I've got this in my head tag: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> Is that right? When I turn the iPad to portrait the 768px stylesheet loads OK - I know this as I've changed the background colour on the body tag - but for some reason a white gap appears to the right of the design - this doesn't happen if I resize the page in the desktop browser. Does anyone know why this is happening? Test page is here this is the media query I have in my 768 stylesheet: @media only screen and (min-width : 768px) and (max-width : 1023px) { ... } but I'm not sure if this is correct as in portrait the iPad is 768px - so not sure why I'd want maximum width set to 1023px. someone help me please - I'm really confused....

I've come to the conclusion I'm just going to biuld the basic html the way I always do it and then go through my styles and turn px values into % values and tweak until it works the way I want it to work. Ethan Marcotte goes on about making a flexible grid and points out how many columns his designs fit into but you don't see him using a complex grid framework in his code - that's what's got me so confused and sent me down the wrong track to begin with...

I've seen that site - I was actually looking for examples of the sites you've built.

have you got any example sites I could look at?

do you build a bespoke grid system though and use the column structure to define the areas of your site - or do you just build something bespoke that fits with your design?

I don't have time to learn how to use LESS...

Just found this thread - nice discussion so far - does anyone use responsive grids then or do you just code your sites yourself and make them responsive. I'm just starting out with RWD and trying to find the best and most simple way to start my next project. I don't like all the grid frameworks available as they're not semantic and full of stuff I don't need and so overcomplicated.

yeah i've got to started on this project and need a solution now... I'll keep on looking.

mmm... frameless - not for me - also don't want to try and get my head around LESS right now so that rules the GGS out as well.

I've generated a fluid grid using this site: http://csswizardry.com/fluid-grids/ as I thought it would provide me with a really simple starting point but there are no instructions on how to get started with it and how to code the HTML - so I ditched that. very annoying that there is zero documentation.