159 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
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
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
+3 more
revaxarts says

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

1579 posts Chris Robinson
  • United States
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Has been a member for 5-6 years
  • Author had a File in an Envato Bundle
  • Referred between 500 and 999 users
  • Author had a Free File of the Month
+5 more
contempoinc says

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

159 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
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

4145 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
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
  • Power Elite Author
  • Power Elite Author: Sold between 1 000 000 - 1 999 999 dollars
  • Bought between 10 and 49 items
  • Referred between 200 and 499 users
  • United Kingdom
  • Has been a member for 3-4 years
  • Exclusive Author
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

4145 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
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
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
+3 more
revaxarts says

Thanks Enabled!

194 posts Dreams Money Can Buy
  • Power Elite Author
  • Power Elite Author: Sold between 1 000 000 - 1 999 999 dollars
  • Bought between 10 and 49 items
  • Referred between 200 and 499 users
  • United Kingdom
  • Has been a member for 3-4 years
  • Exclusive Author
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

4145 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
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