159 posts
    Has been part of the Envato Community for over 3 years Has referred 1+ members Has sold $40,000+ on Envato Market Sells items exclusively on Envato Market
+1 more
ThemeProfuse says

Hi all, How to make responsive website & nivo slider. I troubling to make responsive website so plz Help Me

2024 posts
    Elite Author: Sold more than $75,000 on Envato Market Has sold $250,000+ on Envato Market Sells items exclusively on Envato Market Contributed a free file of the month
+8 more
revaxarts says

nivo slider is working with background image so I guess it’s hard to make it responsive

1589 posts Chris Robinson
    Has referred 500+ members Has sold $500,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+10 more
contempoinc says

Take a look at FlexSlider, super easy to implement: http://flex.madebymufffin.com/

159 posts
    Has been part of the Envato Community for over 3 years Has referred 1+ members Has sold $40,000+ on Envato Market Sells items exclusively on Envato Market
+1 more
ThemeProfuse says

Thanks for reply. But my another images also not show as responsive i’m using image css as

img { width:100%; display:block; height:auto;}

But my images is not resize according to page window width

4191 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Volunteer moderator says
39articles said
Thanks for reply. But my another images also not show as responsive i’m using image css as

img { width:100%; display:block; height:auto;}

But my images is not resize according to page window width

Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px;

Works fine :)

194 posts Dreams Money Can Buy
    Has sold $1M+ on Envato Market and is now a Power Elite Author Power Elite Author: Sold more than $1M on Envato Market Has referred 200+ members Has collected 10+ items on Envato Market
+5 more
SwiftIdeas says
Enabled said
Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px; Works fine :)

Can you share an example of this? I’ve been trying but all I can get it to do is cover over the full size images.

Thanks!

- Ed

4191 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Volunteer moderator says
edcousins said
Enabled said
Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px; Works fine :)

Can you share an example of this? I’ve been trying but all I can get it to do is cover over the full size images.

Thanks!

- Ed

Nivo slider has a main ID class called #slider, when downloading it as default from the website. Give that class a max-width:300px; value for example, and make it smaller and smaller for each resolution you target. It responds by re-sizing the image :) That’s the only example needed. If you use for example

@media screen and (max-width: 320px){
    #slider {
        position:relative;
        max-width:300px;
        max-height:100%;
        height:160px;
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}

That for example is for a iPhone screen in portrait mode, and in the same CSS I also added.

@media screen and (min-width: 340px){    
    #slider {
        position:relative;
        max-width:460px;
        max-height:100%;
        height:160px; 
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}

And that’s added in the same CSS for making the nivo-slider resize to 460px, meaning, the iPhones landscape mode ;)

Try it out! :) Just remember to give it a max-width not a width! Don’t ask me why, I tested this on several devices and noticed that sometimes width does not respond as it should.

2024 posts
    Elite Author: Sold more than $75,000 on Envato Market Has sold $250,000+ on Envato Market Sells items exclusively on Envato Market Contributed a free file of the month
+8 more
revaxarts says

Thanks Enabled!

194 posts Dreams Money Can Buy
    Has sold $1M+ on Envato Market and is now a Power Elite Author Power Elite Author: Sold more than $1M on Envato Market Has referred 200+ members Has collected 10+ items on Envato Market
+5 more
SwiftIdeas says

Hey Enabled,

Thanks for sharing the code!

I can get it to work as I had before where the slider would resize fine, however the original slides still stay the same width / height, and therefore don’t resize with the slider. Is this what you see?

Thanks,

- Ed

4191 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Volunteer moderator says
edcousins said
Hey Enabled,

Thanks for sharing the code!

I can get it to work as I had before where the slider would resize fine, however the original slides still stay the same width / height, and therefore don’t resize with the slider. Is this what you see?

Thanks,

- Ed

No problem guys! Glad to have helped!

@edcousins

That is a bug that cannot be fixed. From what I’ve coded and used this code, it only happens for the first slide, meaning, I can see the background of the ” image to be ” but when the transition takes place, all other transitions behave normally afterwards, that happens because you force it to change width / height in the middle of a transition!

by
by
by
by
by
by