• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Generate Theme: Adding Responsive Slider to Home Page

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: generate, responsive slider

  • This topic has 6 replies, 2 voices, and was last updated 9 years, 7 months ago by skibob1027.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 1, 2013 at 10:39 am #53571
    skibob1027
    Member

    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
    August 2, 2013 at 10:59 pm #53872
    nutsandbolts
    Member

    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+

    August 3, 2013 at 5:23 am #53916
    skibob1027
    Member

    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?

    August 3, 2013 at 9:31 am #53944
    nutsandbolts
    Member

    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+

    August 3, 2013 at 10:51 am #53954
    skibob1027
    Member

    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?

    August 3, 2013 at 11:39 am #53957
    nutsandbolts
    Member

    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+

    August 3, 2013 at 12:47 pm #53964
    skibob1027
    Member

    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
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble