I've created a template but am having trouble making the image reduce in size as the viewport gets smaller. Here's the template's code:
<?php
/*
Template Name: Past
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jeff's Past | Outtacontext</title>
<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/layout.css?v=1" type="text/css" media="screen"/>
<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>
</head>
<body id="past_background">
<div class="past_center">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</body>
</html>I've gotten the image placed in the center of this page (http://outtacontext.com/wp2/test) using this code:
<div class="image_center"><a href="http://outtacontext.com/wp2/past2" class="nounderline"><img src="http://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past1.jpg" alt="Theda Barra" border="0" class="aligncenter" /></a></div>The CSS declared here is:
#past_background div.image_center {width: 100%;}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
a.nounderline{
max-width: 100% !important;
}How can I get images on pages using this template to scale down as the viewport gets smaller? Thanks.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
