I am having problem with this nivoSlider in ventura theme

Hi,

If any body used wordpress ventura theme?
At present I am trying to convert this theme to responsive and I am having hard time doing the part of nivo slider.

Where the images inside the slider are not ready to be responsive. It is showing it max width which is 1020px;

<div id="slider" class="nivoSlider" style="background:position: relative;
background: url('http://localhost/wordpress/wp-content/uploads/2014/11/charming-young-female-lying-on-the-floor-with-laptop1.jpg')
no-repeat scroll 0% 0% transparent;">

Code (markup):

I almost everything except the above code. the images are displaying as background and that part of style itself. I am not sure from it is appearing, I had search all the javascript, css and php files.

Anybody need any more information I will provide, please help me out in this.

Thanks in advance,
Amer

 

It's probably something else causing it to be a set width. Can you link to the site or post some more of the relevant css?

Firebug will allow you to inspect elements to see what's going on.

 

Hi Markus,

Thanks for the reply, actually there is nothing is setting the width, except the image size itself which is 1020px. That is site is on local wampserver. Yes I am using firebug, I will upload a screenshot of what firebug is showing here.

I wondering from where the style tag is inserting and that is disabling all the other style of div id slider and class nivoslide in the following images.

 

Ah ok, you should probably set the background size then.

<div id="slider" class="nivoSlider" style="background:position: relative;
background: url('http://localhost/wordpress/wp-content/uploads/2014/11/charming-young-female-lying-on-the-floor-with-laptop1.jpg')
no-repeat scroll 0% 0% transparent;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: cover;">

Code (markup):

or just

<div id="slider" class="nivoSlider" style="background:position: relative;
background: url('http://localhost/wordpress/wp-content/uploads/2014/11/charming-young-female-lying-on-the-floor-with-laptop1.jpg')
no-repeat scroll 0% 0% transparent;background-size: 100%;">

Code (markup):

 

There you are Markus, but I am sorry to say that I dont understand from where this code is coming. I had search whole js and css files along with few php files
I mean this code

style="background:position: relative;
background: url('http://localhost/wordpress/wp-content/uploads/2014/11/charming-young-female-lying-on-the-floor-with-laptop1.jpg')
no-repeat scroll 0% 0% transparent;"

Code (markup):

Because it seems to be generating automatically from some php or js files, but I am hunting down for this text "scroll 0% 0% transparent", so that I can add option wrote. But I did not found that code in any file.

Any idea will be helpful

 

There is a thread specific to the nivoslider here http://stackoverflow.com/questions/14911519/how-to-set-the-background-size-to-100-using-jquery

The user mentions editing jquery-nivo-slider.js at line 123 which you will find in the plugins folder in your wp-content directory.

Although I would not recommend editing the plugin directly as an update would overwrite your changes.

Instead you could do

$(".nivoSlider").css("background-size":"100% 100%");

Code (markup):

 

Actually Markus first of all mine is a theme that have built in nivo slider, not plugin. I tried to search the file but it has } on the line 123.
Any how I put the code you mention but it did not work.

Thanks for the time you had provided me.

I am just given up on this problem.