WordPress.org

1. poem
   Member
   Posted 9 months 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,

   http://wordpress.org/support/topic/plugin-header-image-slider-dynamic-and-floating-page-widths-not-supported?replies=26

   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
   Member
   Posted 9 months 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
   Member
   Posted 9 months 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
   Member
   Posted 9 months ago #
   

   Try adding this line to override the height:

   div.promo_slider { height: auto; }

5. poem
   Member
   Posted 9 months 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
   Member
   Posted 9 months ago #
   

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

7. poem
   Member
   Posted 9 months 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.

Reply

You must log in to post.