Ask your WordPress questions! Pay money and get answers fast! (more info)

Responsive Image WordPress

  • SOLVED

Hello!

I've done a site on the new Twenty Twelve, and added an image on the homepage within a template.

It displays fine on a full screen, but on an iPhone, that top image bar extends all the way across, and doesn't size down with the rest of the site.

help, please!


http://www.allisonleighcoaching.com/

Answers (6)

2012-12-13

Asad Iqbal answers:

Remove with and height property from the following line:

<img width="961" height="151" alt="" class="header-image" src="http://www.allisonleighcoaching.com/wp-content/uploads/2012/12/header3-04.png">

Always use % instead of fixed height and width.


ohlivia13 comments:

Hi all-

I've tried added max width and width and neither of those work.

Asad, where are you finding this defined width? How can I remove it?


Asad Iqbal comments:

May be it is in the header.php. Can you please share your code here? Alternatively you can give me a temporary ftp access into my inbox thus I can check.


ohlivia13 comments:

Share the header code? That's here. But the image is only on the home page, the template code for that Ive placed below.


<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html class="ie" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37000072-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</header>

<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

<!-- #masthead -->

<div id="main" class="wrapper">





TEMPLATE


<?php
/*
Template Name: Allison Home
*/
?>

<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/

get_header(); ?>

<div class="weightloss"><img src="http://www.asmallbrightidea.com/allison/wp-content/uploads/2012/11/weightloss2-07.png" alt="Weight Loss for Real. For the Last Time."></div>

<div id="primary" class="site-content">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Featured post', 'twentytwelve' ); ?>
</div>
<?php endif; ?>
<header class="entry-header">
<?php the_post_thumbnail(); ?>
<?php if ( is_single() ) : ?>

<?php else : ?>

<?php endif; // is_single() ?>
<?php if ( comments_open() ) : ?>
<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->
<?php endif; // comments_open() ?>
</header><!-- .entry-header -->

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>


</article><!-- #post -->

<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>


Asad Iqbal comments:

At line 109-110 please find the following code block:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

and replace with:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" alt="" /></a>

Let me know if it helps.


Asad Iqbal comments:

Oh, it is in the header file.


ohlivia13 comments:

Nope :(

Still looks like the image here: