1734 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VisualSharing 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

Then you are not setting width: 100% to all necessary parents. :)

P.S. Your avatar has bad contrast on white background. Don’t be surprised if threads started by you have a low reply rate – it’s just a usability issue, it’s not the thread title.

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says
Enabled said

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.

Do you have a working example of this you can show? I don’t see how this is possible because Nivo applies the sliced up images as background images to different little chunks it breaks everything into for its transitions. So, with your method sure the slider would scale down, but it would just cut off all the images. Maybe I’m missing something?

Now I know this is not the Nivo slider, but a variation Kriesi has created himself, but his is responsive.

http://www.kriesi.at/themes/propulsion/
4283 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

I gave you the code. It works for me. I used it for all my customers and my themeforest theme, and the theme i’m working now, and I’ve tested it extensively. Giving out the max-width property will lock it, weather JS wants it or not :D

33 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
JPThemes1 says

templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says
Enabled said
I gave you the code. It works for me. I used it for all my customers and my themeforest theme, and the theme i’m working now, and I’ve tested it extensively. Giving out the max-width property will lock it, weather JS wants it or not :D

Nope, not buying it. Prove it w/one link. :-)

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says
jorgemartinez178 said
templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

Look closer at the link you posted. When you shrink the window down to his tablet size and refresh the page, you will notice that it appears the slider has scaled down, but actually the right side of all the photos have just been cut off.

But the good news is one of the Nivo guys has said in their support forum that in their next big release they plan to make Nivo responsive (see here). And someone that works with these guys has also eluded to it on Twitter today. This is my juicy gossip column for the day. ;-)

33 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
JPThemes1 says

haha .. O_o if you’re right does not work 100% and thanks for sharing the information.

but what comes out the update you can use this plugin very similar other http://jayis.net/thomas/cycle/

ThemeBlvd said
jorgemartinez178 said
templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

Look closer at the link you posted. When you shrink the window down to his tablet size and refresh the page, you will notice that it appears the slider has scaled down, but actually the right side of all the photos have just been cut off.

But the good news is one of the Nivo guys has said in their support forum that in their next big release they plan to make Nivo responsive (see here). And someone that works with these guys has also eluded to it on Twitter today. This is my juicy gossip column for the day. ;-)
by
by
by
by
by
by