WordPress plugins and themes

nivo slider is wider than my images

A blank space to the right of each image indicates that the nivo slider is wider than your images. The space on the right is because the nivo slider part of the code sets its width to the size of the containing div but your images are smaller. You can control this by using CSS classes on the slider-wrapper or theme-default selector.


[nivo theme=default271]


[nivo class=mw200 theme=default271]

Use custom CSS ( {} ) to set the max-width of the slider. Here we do it by setting a class on the slider to mw200 which is defined as

div.mw200 div.slider-wrapper { max-width: 200px; overflow: hidden; }
.theme-default271 .nivoSlider a.iframe:first-child img  { margin-bottom: 40px; }
.theme-default271 .nivoSlider a.iframe:nth-child(n+2) img  { border-top: 3px solid red; display:none; }

You can also set the max-width for all instances of the slider div.slider-wrapper { max-width: 618px; } or set it on a specific page div#post-53 div.slider-wrapper { max-width: 618px; }

Note: These notes are applicable Nivo version 2.7.1, not nivo version 3.2. You need to choose a non-responsive theme, e.g. default271, for this method to work. If you are using a responsive Nivo theme (e.g. the default theme) then this logic does not apply.

Leave a Reply

Recent plugin updates
oik v2.4-beta.1218 Tested with WordPress 4.1 and WordPress Multisite ...
oik-plugins v1.14 Improved support for plugin update checking. ...
oik-popup v0.3 Improved positioning of the header when using a narrow device. ...
oik v2.4-alpha.1112 Changes for WP-a2z and oik-plugins. ...
oik-shortcodes v1.26 Changes to improve the display of the Dynamic API Reference for WP-a2z and oik-plugins. ...