Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14023

    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.

    #81778

    Never mind. I figured it out. I added a max-width: 100%; to my css.

    #81779

    Glad you were able to figure it out :)

    Regards,

    Devin

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Trying to Make Image "Responsive" in New Template’ is closed to new replies.