WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Responsive Header problem (3 posts)

  1. odalaigh
    Member
    Posted 1 year ago #

    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://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year 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>
  3. odalaigh
    Member
    Posted 1 year ago #

    awesome worked perfectly!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.