WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Responsive Problem, Slideshow in Header moving down (4 posts)

  1. apodworny
    Member
    Posted 1 year ago #

    I looked through a couple pages on support for this plugin and tried a few things but nothing has worked, so I'm asking now after over a day of trying to fix this.

    http://attachmentnetwork.ca/

    I want the slideshow to show up beside my logo and maintain responsiveness, however the only way to get it to stay there is to set the width of the containing div to a pixel value. The issue with setting it to a pixel value is then it isn't responsive anymore, and when you make the page smaller it moves the slideshow down under the footer but still within the header div.

    Relevant HTML/PHP (header.php file of the child template):

    <?php responsive_header(); // before header hook ?>
        <div id="header">
    
            <?php if (has_nav_menu('top-menu', 'responsive')) { ?>
    	        <?php wp_nav_menu(array(
    				    'container'       => '',
    					'fallback_cb'	  =>  false,
    					'menu_class'      => 'top-menu',
    					'theme_location'  => 'top-menu')
    					);
    				?>
            <?php } ?>
    
        <?php responsive_in_header(); // header hook ?>
    
    	<?php if ( get_header_image() != '' ) : ?>
    
            <div id="logo">
                <a href="<?php echo home_url('/'); ?>"><img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" /></a>
            </div><!-- end of #logo -->
    
        <?php endif; // header image was removed ?>
    
        <div id="rect-1"><?php do_action('slideshow_deploy', '304'); ?></div>
    
        <?php if ( !get_header_image() ) : ?>
    
            <div id="logo">
                <span class="site-name"><a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
                <span class="site-description"><?php bloginfo('description'); ?></span>
            </div><!-- end of #logo -->  
    
        <?php endif; // header image was removed (again) ?>
    
        <?php get_sidebar('top'); ?>
    
    				<?php wp_nav_menu(array(
    				    'container'       => '',
    					'theme_location'  => 'header-menu')
    					);
    				?>
    
                <?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
    	            <?php wp_nav_menu(array(
    				    'container'       => '',
    					'menu_class'      => 'sub-header-menu',
    					'theme_location'  => 'sub-header-menu')
    					); 
    
    				?>
    
                <?php } ?>
    
        </div><!-- end of #header -->
        <?php responsive_header_end(); // after header hook ?>

    Relevant CSS (styles.css file of the child template):

    #logo
    
    {
    	text-align: left;
    }
    
    #header
    
    {
    	height: 245px;
    }
    
    #rect-1
    
    {
    	float: left;
    	width: 100%;
    	height: 200px;
    }

    Any and all help would be greatly appreciated, if I can provide any more information that you need just let me know and I'll do my best.

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    This is pretty default behaviour for any element you're floating next to another element in a responsive website. A floating element will always drop below the other floating element before resizing to the page's width.

    By Googling for "responsive floating divs", I came across a site that claims to offer a solution to this problem: Responsive grid system. Perhaps it would be interesting for you to check it out.

    Best regards,
    Stefan

  3. apodworny
    Member
    Posted 1 year ago #

    I'm not sure what I was thinking lol, I should have realized floats would just be pushed down. I tried putting a clear both div underneath it, but that didn't work either.

    Unfortunately the grid system isn't an option for me, after a couple days of trying to fix the 'Slideshow' plugin I just switched to the 'Meteor Slides' plugin and it works as I wanted, even if it doesn't have as many features as the 'Slideshow' plugin.

    Thanks for your quick reply though.

  4. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    No problem, you're welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic