Responsive Header problem

Resolved

(@odalaigh)

Im having problems finding out where I went wrong with my header. The slideshow loads just fine but has no responsiveness. my noob html skills showing thru..

Site

<?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]>
<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 style="text-align:center; width:1050px; margin-top:-60px; margin-left:auto; margin-right:auto;">
<div style="z-index: 100; position:relative; left: 0px;  top: 37px">
<img alt="top image" src="http://darkskycoast.com/wp-content/uploads/2013/03/banner8_with_overlap.png">
</div>
<?php do_action('slideshow_deploy', '849'); ?>
</div>

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

	</header><!-- #masthead -->

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

http://ww.wp.xz.cn/extend/plugins/slideshow-jquery-image-gallery/

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Stefan Boonstra
(@stefanboonstra)

13 years, 2 months ago
I see that the element containing the slideshow has a fixed width of 1050 pixels. This element does not resize when the browser window gets smaller, therefore the slideshow doesn’t resize either.

If you remove the 1050 pixels style rule, the slideshow does resize. The header above the slideshow probably needs a width rule of 100% to be able to resize as well.

It would then look something like this:
```
<div style="text-align:center; margin-top:-60px; margin-left:auto; margin-right:auto;">
    <div style="z-index: 100; position:relative; left: 0px;  top: 37px">
        <img alt="top image" src="http://darkskycoast.com/wp-content/uploads/2013/03/banner8_with_overlap.png" style="width:100%">
    </div>
    <?php do_action('slideshow_deploy', '849'); ?>
</div>
```
Thread Starter odalaigh
(@odalaigh)

13 years, 2 months ago

awesome worked perfectly!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive Header problem’ is closed to new replies.