Modifications

I completed several modifications for cell phone browsing vs tablet browsing.  I incorporated additional style sheet for each, which called for additional media queries.  Here’s the queries that I used:

Media queries used:
<!–tablet__>
<link href=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/style_tablet.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:321px) and (max-width:768px)” />
<link href=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/style_tablet.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:769px) and (max-width:1024px)” />
<!– Phone –>
<link href=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/style_phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-width:320px)” />
<link href=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/style_phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:321px) and (max-width:480px)” />

When viewing this on a mobile phone, you will see a different footer image than you would on the tablet screen.  There is no footer image on the default or desktop screen.

I also changed the background colors for the desktop, cell phone and tablet.

For the cell phone the right aside is at the bottom, for tablets, I left it alone.