WordPress.org

Support

Support » Plugins and Hacks » Captain Slider » [Resolved] Slides full-width despite height and width settings

[Resolved] Slides full-width despite height and width settings

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Captain Theme

    @captaintheme

    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.

    Chad Warner

    @chad-warner

    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.

    Plugin Author Captain Theme

    @captaintheme

    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.

    Chad Warner

    @chad-warner

    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.

    Plugin Author Captain Theme

    @captaintheme

    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

    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

    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.

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] Slides full-width despite height and width settings’ is closed to new replies.
Skip to toolbar