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

2187 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+10 more
revaxarts says

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

1617 posts Chris Robinson
  • Located in United States
  • Has sold $500,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
contempoinc says

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

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

4597 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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 :)

194 posts Dreams Money Can Buy
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has referred 200+ members
  • Has collected 10+ items on Envato Market
+5 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

4597 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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.

2187 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+10 more
revaxarts says

Thanks Enabled!

194 posts Dreams Money Can Buy
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has referred 200+ members
  • Has collected 10+ items on Envato Market
+5 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

4597 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by