WordPress.org

Ready to get started?Download WordPress

Forums

Captain Slider
[resolved] Slides full-width despite height and width settings (9 posts)

  1. Chad Warner
    Member
    Posted 1 year ago #

    No matter what height and width I specify in this plugin's settings, my slides appear at the full width of the page (example). The images are 500px wide. I'm using a child theme of Twenty Twelve. I don't have any other slider or media-related plugins activated.

    http://wordpress.org/extend/plugins/captain-slider/

  2. Captain Theme
    Member
    Plugin Author

    Posted 1 year ago #

    By default the slides have a 100% width that will stretch to their container. How are you inserting it? With PHP or Shortcode?
    Try wrapping it like this:

    <div style="width: 600px">
    shortcode or PHP
    </div>

    where 600px is the width you want.

  3. Chad Warner
    Member
    Posted 1 year ago #

    I'm using the shortcode in a page (inserted via editor). The inline styling you suggested works (as does max-width), but makes the slider no longer responsive. Other sliders like Soliloquy Lite allow you to set max dimensions and still have the slider remain responsive. Unfortunately, all the other sliders I've tried have other shortcomings, which led me to yours.

  4. Captain Theme
    Member
    Plugin Author

    Posted 1 year ago #

    If you wrap it in a container with a width it will still be responsive. I just tested on my installation. Make sure you're adding a new container around the slider, not just editing the CSS for .flexslider.

  5. Chad Warner
    Member
    Posted 1 year ago #

    That doesn't work for me, at least not in Firefox or IE9. As you can see on this page, I used

    <div style="width: 500px;">
    [slider id="7"]
    </div>

    and the slider doesn't shrink when I resize the browser below 500px wide.

  6. Captain Theme
    Member
    Plugin Author

    Posted 1 year ago #

    Yeah it's working in Google Chrome perfectly for me but not in Firefox. I'm not sure why though. Maybe try asking on Stack Overflow

  7. Chad Warner
    Member
    Posted 1 year ago #

    I'm creating a different site now, and having the same trouble. The fix you suggested (wrapping the slider in a div with a specified width) prevents the slider from being responsive in Chrome as well as Firefox and IE9. Example

  8. Chad Warner
    Member
    Posted 1 year ago #

    Wow, I can't believe I didn't figure this out earlier. The container needs to have a max-width, not a width, to remain responsive. I'm working on yet another site today, and found that this works:

    <div style="max-width: 500px;">
    [slider id="7"]
    </div>

    Alternatively, play around with setting max-width on the flexslider class.

  9. fredpayet
    Member
    Posted 1 year ago #

    Yup, that even works for the 'height' of the slide with something like :

    <div style="max-height: 240px">
    [slider id="12"]
    </div>

    When the slide bullets are removed, this helps to avoid a big gap between the slide and the text.

    Thanks again

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic