Banner Size Is WAY Off – How to adjust?

  • https://www.providerwebcapital.com

    Once you click on the link you can see that the blue banner in each page expands all the way through on the left and right completely out of the bounds of how it should be.

    I have no idea how to change this, or where the code is located.

    Please enlighten me!

    Thanks so much!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter PWCTeam2015

    (@pwcteam2015)

    It seems the website link isn’t linking properly, sorry. But the website is https://www.providerwebpcapital.com

    Thread Starter PWCTeam2015

    (@pwcteam2015)

    Anyone have any ideas?

    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.

    Thread Starter PWCTeam2015

    (@pwcteam2015)

    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.

    Thread Starter PWCTeam2015

    (@pwcteam2015)

    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!!

    Thread Starter PWCTeam2015

    (@pwcteam2015)

    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….

    Thread Starter PWCTeam2015

    (@pwcteam2015)

    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="https://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="https://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">
    Thread Starter PWCTeam2015

    (@pwcteam2015)

    still cant figure this out….

    @pwcteam2015 I just checked your site, seems you got it all figured now.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Banner Size Is WAY Off – How to adjust?’ is closed to new replies.