Generate Theme: Adding Responsive Slider to Home Page

Community Forums Forums Design Tips and Tricks Generate Theme: Adding Responsive Slider to Home Page

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  skibob1027 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #53571

    skibob1027
    Participant
    Post count: 6

    I’m using the Generate theme, but would like a static home page with a slider in lieu of the “Generate Box”. To add the slider, I installed the Genesis Responsive Slider plugin and added the following code to functions.php:

    /** Add slider */
    add_action( 'genesis_after_header', 'include_sidebar_widget' );
    function include_sidebar_widget() {
    if ( is_home() ) {
    echo '<div class="slider">';
    dynamic_sidebar( 'slider' ); // this is where the widget info gets inserterted
    echo '</div>';
    }
    }
    genesis_register_sidebar( array(
        'id'        => 'slider',
        'name'      =>  'Slider',
        'description'   =>  'This is where a slider goes',
    ) );
    

    Once configured, this got the slider working properly on desktops, but unfortunately it is not “responsive” on tablets and phones. If you’re on a desktop, you can see the effect by reducing the size of your browser window.

    How can I make the slider responsive to work alongside the rest of the page?

    http://www.steibelsauto.com
    #53872

    nutsandbolts
    Keymaster
    Post count: 3202

    It looks like the width and height of the slider are set in px in your stylesheet:

    /* Slider
    ------------------------------------------------------------ */
    .slider {
    	margin: 0 auto;
    	height: 430px;
    	padding: 0 0 25px;
    	width: 910px;
    }

    Instead of px, try percentages – that should allow the slider to resize depending on screen size.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #53916

    skibob1027
    Participant
    Post count: 6

    Thanks! I made the change to percentages, so the CSS now reads:

    /* Slider
    ------------------------------------------------------------ */
    .slider {
    	margin: 0 auto;
    	height: 100%;
    	padding: 0 0 25px;
    	width: 100%;
    }

    Unfortunately, now the slider isn’t properly situated on the page (). Any idea on how to ensure the slider stays centered on the page?

    Additionally, as the screen resolution decreases (particularly to mobile phone sizes) the slider covers up the navigation instead of moving below it. Any thoughts?

    #53944

    nutsandbolts
    Keymaster
    Post count: 3202

    In your stylesheet, add this:

    .flexslider {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    }

    If that doesn’t work, you may need to do it this way:

    .flexslider {
    margin: 0 auto !important;
    padding: 0;
    width: 100%;
    }

    That will get it centered on the page again. As for the height on mobile, it’s hard to tell what’s causing that, but I would check the slider settings and your stylesheet to see if there is a height in px specified anywhere. Personally, I dislike the Responsive Slider plugin for exactly this reason – I think it’s very difficult to style it if your theme doesn’t already support it.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #53954

    skibob1027
    Participant
    Post count: 6

    Thank again for your help, nutsandbolts. It looks like the code did center the slider, but it didn’t pull in the width of the slider itself to the “normal” bounds of the page (910px). Do you think this has to do with the width being set at 100%, but “100%” isn’t defined as a max-width of 910px? I’m not sure where I would do that…

    As far as solving for responsiveness, I would honestly be fine ditching the slider once the site hits phone resolution (which is where it becomes an issue). Is that possible?

    #53957

    nutsandbolts
    Keymaster
    Post count: 3202

    Yes, you can do that. In the section of your stylesheet marked for the smallest screen sizes, you can do something like

    .slider {
            display: none;
    }

    That should hide that div so people on phones don’t see it at all.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #53964

    skibob1027
    Participant
    Post count: 6

    Thanks again! I set the max-width to 910px and the overall slider width is working fine at full resolution now.

    The last issue (!) is that the slider runs up against the nav menu when the resolution is between 600px and 940px (tablet resolution) and the navigation options start to drop to a second row. Any ideas on that side? I’ve tried playing with the margins and padding, but no luck so far.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.