CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3274745
user3274745

Reputation: 361

Css positioning of parent and child elements

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:

enter image description here

I would really appreciate if you could help me out.

Upvotes: 1

Views: 85

Answers (1)

STP38
STP38

Reputation: 331

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;
      }

Upvotes: 1

Related Questions