1734 posts
  • Exclusive Author
  • Won a Competition
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 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/
4148 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 5 000 and 10 000 dollars
JPThemes1 says

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

1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 5 000 and 10 000 dollars
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