Please try this url where i have explained the problem in more detail: Make division image responsive
I want to make the width of .slider-wrapper 100%. How do i change the other components of the css?
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
The image:
I would really appreciate if you could help me out.
You can use !important like this
.nivoSlider {
position:relative;
width:290px !important;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
or you must define it better like this
.nivoSlider slider-wrapper {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.