164 posts
  • 4 Years of Membership
  • Affiliate Level 1
  • Author Level 6
  • Exclusive Author
ThemeProfuse
says

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

2280 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Community Superstar
  • Industrious API Inventor
+15 more
revaxarts
says

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

1680 posts Chris Robinson
  • Elite Author
  • Author Level 10
  • 7 Years of Membership
  • United States
+13 more
contempoinc
says

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

164 posts
  • 4 Years of Membership
  • Affiliate Level 1
  • Author Level 6
  • Exclusive Author
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

4948 posts Community Mod Building awesome stuff for your mobile devices!
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
+17 more
Enabled
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 :)

198 posts Dreams Money Can Buy
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Author Level 12
+8 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

4948 posts Community Mod Building awesome stuff for your mobile devices!
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
+17 more
Enabled
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.

2280 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Community Superstar
  • Industrious API Inventor
+15 more
revaxarts
says

Thanks Enabled!

198 posts Dreams Money Can Buy
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Author Level 12
+8 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

4948 posts Community Mod Building awesome stuff for your mobile devices!
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
+17 more
Enabled
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