CODEWITHSUNDEEP
responsive-designnivo-slider
Giovanna Coppola
Giovanna Coppola

Reputation: 215

How is Nivo Slider automatically resizing to fit in different viewport sizes?

I asked something similar before, but I guess I wasn't really clear and that's maybe why my question was voted down twice. Let me see if I can make a point here.

I'm using Nivo Slider on a website I'm working on I'm and very glad with its behavior, especially because it resizes automatically when I'm using different viewport sizes. It works great on my monitor, it works great on my smartphone and it works great on my tablet. It resizes like magic!

I've read all the code and I couldn't find how Nivo Slider does it. No media queries or viewport metatags. I'm really interested in making my website resize the way Nivo Slider does.

Would love to hear from all of you who are familiar with Nivo Slider or who might give me a helping hand.

If necessary: http://dev7studios.com/plugins/nivo-slider

Upvotes: 1

Views: 4891

Answers (2)

Pablo S G Pacheco
Pablo S G Pacheco

Reputation: 2600

I like to use it like this, to get responsive without problems:

css 

 #nivoSlider, #nivoSlider img{width:100%;height:auto !important}

HTML:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="nivoSlider" class="nivoSlider">
       <img src="" />
    </div>
</div>

Upvotes: 2

Giovanna Coppola
Giovanna Coppola

Reputation: 215

Just figured it out: it uses width:100%. I didn't realize it could be that easy.

.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    left:0;
    margin-top:100px;
}

.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

Upvotes: 0

Related Questions