It seems the website link isn’t linking properly, sorry. But the website is http://www.providerwebpcapital.com
The banner was put in header.php of childtheme.
Here is some of that part (from view page source).
<body>
<div id="page" class="hfeed site">
<header>
<div class="header-div"> ... </div>
<nav> ... </nav>
</header>
</div>
<img id="page-banner" class="banner" src="/wp-content/themes/pwc/images/banner-pwc-full.png">
<div id="page" class="hfeed site">
Notice the closing tag for div id=”page” and then the opening tag for div id=”page”, and this is wrong because the id should not be used more than once in the page but browser will render it just fine, any javascript that uses that id might not work properly though.
To fix the image problem, have the image cut to 1020px which is derived from 960+(30*2), the 30 is padding value used by child theme, and then use this in child theme stylesheet
.banner {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
To also fix the html problem, get rid of extra closing and openning div id=page, then move the img tag inside <header> tag just before the closing </header> tag, then work on the CSS.
Awesome!! Thank you so much, I’m going to go step by step and fix everything you outlined (or try to)!
Ok, so lets start with the image resize, where is the best place for me to go and cut it to 1020px?
After the resize do I just copy the code anywhere on the theme stylesheet?
It’s up to you to cut what part of image, but since it’s a banner with text and image, so just make sure we have both image and text within 1020px.
Then upload the image to your WP, once upload get the image url and then go to header.php of child theme and replace the image link, then go to child theme stylesheet find that selector and use that code instead.
I wasn’t the one who uploaded the image file on the wordpress site so I’m not sure where the exact file is. I’m assuming that under “Media” in WordPress all of the files that have been used on the site are stored? And it seems like I can edit them right on the spot, even resize them, is this a valid approach?
Thanks so much!!
I also resized the image and uploaded it, as well as changed the url in the Header.php code to the image URL, it resized but its still running all the way around….
This is the code I have in the Header.php
[ Moderator note: please use the code button for code. ]
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?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(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="header-div" style="overflow: hidden;">
<div class="logo">
<a href="http://providerwebcapital.com/"><img src="/wp-content/themes/pwc/images/providerweb-capita_think.gif"/></a>
</div>
<div class="contact-header">
<p><a href="/contact-us/">Contact Us</a>
<a href="855.860.9700">855.860.9700</a>
</div>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<a>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
<?php endif; ?>
</header><!-- #masthead -->
</div>
<!-- Banner pre-content -->
<?php while ( have_posts() ) : the_post(); ?>
<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
?>
<?php
if ( has_post_thumbnail() ) {
?>
<img id="page-banner" class="banner" src="<?php echo $feat_image; ?>">
<?php
}
else {
?>
<img id="page-banner" class="banner" src="/wp-content/uploads/2015/10/rsz_banner-pwc-full.png">
<?php
}
?>
<?php endwhile; // end of the loop. ?>
<div id="page" class="hfeed site">
<div id="main" class="wrapper">
still cant figure this out….
@pwcteam2015 I just checked your site, seems you got it all figured now.
