[resolved] How can I create flexible slider header images? [Promotion Slider + YOKO] (8 posts)

  1. poem
    Posted 3 years ago #

    I'm using YOKO theme and trying to use Promotion slider WP plugin on Header images. It is almost nice but doesn't support for flexible image sizes. I found the topic below,


    and it seems Jono.Rogers's answer is a great solution. The site he showed is what I want. How can I modify the Promotion Slider like Nivo slider on this topic?

    Thanks in advance.

  2. Micah Wood
    Posted 3 years ago #

    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%; }

  3. poem
    Posted 3 years ago #

    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?

  4. Micah Wood
    Posted 3 years ago #

    Try adding this line to override the height:

    div.promo_slider { height: auto; }

  5. poem
    Posted 3 years ago #

    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?

  6. Micah Wood
    Posted 3 years ago #

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

  7. poem
    Posted 3 years ago #

    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.

  8. SDM36
    Posted 3 years ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Topic