Generate Theme: Adding Responsive Slider to Home Page

[skibob1027]

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

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[skibob1027]

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?

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[skibob1027]

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?

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[skibob1027]

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.

[Author]

Posts