160 posts
  • Has been part of the Envato Community for over 4 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

2261 posts
  • Became a Top 20 Author of the Month
  • Created a helpful tool/app using the Envato API
  • Created a helpful tool/app for Envato Market users
  • Had an item that was trending
+14 more
revaxarts
says

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

1654 posts Chris Robinson
  • Became a Top 20 Author of the Month
  • Had an item that was trending
  • Located in United States
  • Has sold $500,000+ on Envato Market
+12 more
contempoinc
says

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

160 posts
  • Has been part of the Envato Community for over 4 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

4932 posts Community Mod Building awesome stuff for your mobile devices!
  • Had an item that was trending
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
+16 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 :)

195 posts Dreams Money Can Buy
  • Became a Top 20 Author of the Month
  • Had an item that was trending
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
+7 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

4932 posts Community Mod Building awesome stuff for your mobile devices!
  • Had an item that was trending
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
+16 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.

2261 posts
  • Became a Top 20 Author of the Month
  • Created a helpful tool/app using the Envato API
  • Created a helpful tool/app for Envato Market users
  • Had an item that was trending
+14 more
revaxarts
says

Thanks Enabled!

195 posts Dreams Money Can Buy
  • Became a Top 20 Author of the Month
  • Had an item that was trending
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
+7 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

4932 posts Community Mod Building awesome stuff for your mobile devices!
  • Had an item that was trending
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
+16 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