Responsive Design
I\'ve updated my theme here to make the layout more responsive depending on the device you view it in. For both smart phones and iPads/tables, the layout linearizes. That is a fancy way of saying the right sidebar should scoot below the main content area, and everything will become 100% wide to fill the screen.
I did this using CSS3 media queries, this technique only works in newer browsers, including Chrome, Firefox. and Mobile Safari.
First, the viewport tag will help different devices render the page correctly. After reading, Choosing a viewport for iPad sites, and A tale of two viewports --- part two, I added this to my page template
{syntaxhighlighter HTML}
I then added three blocks of media queries to adapt the layout depending on the device, the first block linearizes the page content if the device screen is less than 1024px wide. The second and third blocks fix some font sizes so that text renders legible on different devices.
{syntaxhighlighter CSS} /* LINEARIZE CONTENT */ \@media only screen and (max-device-width: 1024px) { #wrapper { width:auto; padding:10px 10px 0; } #container, #page { width:auto; margin:0; padding:0; }
rgCenter, #rgRight { float:none; clear:both; } #rgRight {
background-color: #e3e3e3; padding:20px; margin:0 -20px -20px; } div.span-10, div.span-6 { float: none; width: auto; margin-right:0px; } } /* ipad / tablets */ \@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { font-size:1.3em; }
wrapper { width:1024px; padding:20px 20px 0; } .dsq-comment-text {
font-size:1.8em; line-height:1.5; } } /* ipod/iphone3 */ /* Smartphones (portrait and landscape) ----------- */ \@media only screen and (max-device-width : 480px) { /* Styles */ body { font-size:1.3em; } #wrapper { padding:10px 10px 0; } #logo-floater h1 { font-size:1.5em; } #page h1 { font-size:1.3em; } #page h2 { font-size:1.2em; } #page h3 { font-size:1.1em; } }