Hi Guys
I have a loose implementation, please feel free to tear it apart and make it better. I have added css below altogether but you may prefer to keep your declarations on a per element basis.
I have chosen to keep the sidebar at 300px width as a constant, it may be easier to have it at say 30%. Or you could take the widths and margin auto away from branding, menu, main and siteinfo and add them to the wrapper instead.
Anyway add this to your css file at the end (usually default css or style.css)
This gives the site a maximum width of 1140px, no particular reason just seemed about right to me.
#branding {max-width: 98%; width: 1140px;}
.menu {max-width: 98%; width: 1140px;}
#main {max-width: 98%; width: 1140px;}
#siteinfo {max-width: 98%; width: 1140px;}
#container {width: 65%;}
#content {width: 98%;}
Now for the media queries, again you may want to adjust percentages and px, oh and nearly forgot, the header will change colour as you resize, I used this as a visual clue.
/*thematic childtheme media queries */
/* when the users browser size is below 1000px */
@media screen and (max-width: 1000px) {
#header {background: lime;}
#main, #siteinfo, #branding, .menu {max-width: 94%;}
#container {width: 58%;}
}
/* when the users browser size is below 820px, i put this here as there was a problem with sidebar and conatiner overlapping */
@media screen and (max-width: 820px) {
#container {width: 55%; }
}
/* when the users browser size is below 760px */
@media screen and (max-width: 760px) {
#header {background: green;}
#main, #siteinfo, #branding, .menu {max-width: 90%;}
#container {width: 60%; clear: right;}
.main-aside {float: left;}
}
/* when the users browser size is below 600px */
@media screen and (max-width: 600px) {
#header {background: yellow;}
.main-aside {float: left;}
}
/* when the users browser size is below 480px, there is a webkit font size adjust as this is likely to an iphone size */
@media screen and (max-width: 480px) {
#header {background: fuchsia;}
html {-webkit-text-size-adjust: 110%;}
}
/* when the users browser size is below 320px */
@media screen and (max-width: 320px) {
#header {background: maroon;
html {-webkit-text-size-adjust: 110%;}}
}
you will also need to add this to your functions.php
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
function childtheme_media_queries_meta() { ?>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<?php
}
add_filter('wp_head', 'childtheme_media_queries_meta');
and of course it wont work in Internet explorer so you need javascript for that I used this one http://code.google.com/p/css3-mediaqueries-js/ I believe it works but haven't tested it yet....sorry.
add like so
function childtheme_scripts() {?>
<!--[if lt IE 9]>
<script src="/wp-content/js/css3-mediaqueries.js" type="text/javascript"></script>
<![endif]-->
<?php }
add_action('wp_head','childtheme_scripts');
This script doesn't work with @import, but there are posts on the forum that cover getting around that if needed.
Well this is about as far as I have got, hope it helps someone. I shouls also say a lot of the info I got was from this tutorial by nick la
http://webdesignerwall.com/tutorials/css3-media-queries
