Support » Plugins and Hacks » How can I create flexible slider header images? [Promotion Slider YOKO]

Viewing 7 replies - 1 through 7 (of 7 total)
  • The width of the promotion slider adapts to the space, unless you specifically set a width in the shortcode. Assuming you haven’t defined a width, all you need to do is apply some CSS. Any CSS rules you add should be added to your active theme’s style.css file.

    This line will ensure that images don’t get cut off if they are wider than the slider’s width:

    div.promo_slider img { max-width: 100%; }

    This line will ensure that images always fill the space:

    div.promo_slider img { width: 100%; }

    Hi Micah,

    I appreciate your answer to my question in a row. I tried to fix it like you said but undone. 1: I deleted the definition “width=1102px, hight=350px” on the shortcode, 2: Adding div.promo_slider img { max-width: 100%; } to style.css.

    1 caused the default style{height: 235px;} appeared and cut off the images. So I added the style{height:350px} to div.promo_slider img on style.css. Actually, it worked as far as the width but images keeps the height. In orher words, the aspect ratio is wrong when flex the browser.

    How can I fix them?

    Try adding this line to override the height:

    div.promo_slider { height: auto; }

    Nothing changed. It has overwritten the height but images still keep the height…

    And I found div.promo_slider has the height 354px when define height auto or 100% to it. What could have caused this 4px?

    Not sure. I would have to look at the page to see what might be going on.

    It worked when I added the {height: auto} to img at the same time.

    4px issue is still remaining though my main problem resolved. Thank you so much.

    Hi Micah,

    I’m having exactly the same problem here.
    The site (in development) is cssrecycling.co.uk/stage/

    The promoslider is there at the top.

    so far i have used:

    div.promo_slider img { width: 100%; height: auto; }
    div.promo_slider { height: auto; min-height: 47px;}

    to make the image responsive, however the min-height rule is the only thing height-wise it seems to take notice of; if i remove it the promo slider thinks it’s 0px high and disappears.

    Would love to be able to get rid of the gap underneath the slider, when the screen is less than 100%.
    p.s. there is no gap currently beacuse min-height is set to 47px, however it is also chopping off most of the image when the screen is sized larger…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How can I create flexible slider header images? [Promotion Slider YOKO]’ is closed to new replies.