I was asked to create a page for the web / iPad and facebook page ( using a facebook plugin to represent the site in an iframe ) I had no intention of building and configuring the theme to the difference sizes and to be quite honest CSS has advanced far enough for a smooth regression between these sizes.

I have been using the zeropoint theme for a while and found it comfortable to use. I am sure you can configure these types of settings using most themes.

1.

Create a zeropoint subtheme. Copy the .info file into your new theme directory in the sites/all/themes/YOURTHEME folder. ( be sure to have a copy of the theme you want to base it on in that same directory )

2.

Add "base theme = zeropoint" (without "") (and if you want change the screenshot)

3.

Create a new .css file and add it to your .info file. "stylesheets[all][] = YOURSTYLE.css"

4.

Enable the theme and in the theme configuration settings select "themer" under layout settings -> style then select "fluid width (custom)" in the layout width option

---- Now if you view the site, it's width is based on the size of your screen. This is good but if users are using a large width screen the layout can get very chaotic. All we need to work between is the web standard 960px, the iPad width of 768px or 1024px depending on its orientation and 493px for the facebook page.

So thats not bad. between 1024px and 493px. But 1024px is a bit much so ...

5

. In your new custom css file paste this code

body.layout-fluid .sizer0, body.in-maintenance .sizer0 {
max-width:980px;
min-width:493px
width: 95%;
}

and you are done.

The max-width keeps the max size you want (960px)while falling down smoothly to the sizing for the iPad and facebook page. As you carry on theming bear in mind this setup you have created and design accordingly (and test), Min-width is added so that you can design within the specs and phone uses will not get a mess when they browse your site on their phone. Rather use other mobile theming options (unless you up for the challenge ).