CSS div responsivity problem

[ennio2]

Hello guys!

I have this slider script below and I want it to be responsive. So far I managed that it works horizontally but not vertically. The image inside the ‘slide’ div is also scaling properly. If I don’t give any height property to the container div then it doesn’t show anything…

.slider-container{
  max-width: 960px;
  position: fixed;
  height:530px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  position: relative;
  overflow: hidden;
  display: block;
}

.slider-container .slide{
  position: absolute;
  top:0;
  display:none;
}
.slider-container .slide:nth-child(1){
    display:block;
}
.slider-container .slide .text{
  position: absolute;
  top:0;
  width: 100%;
  line-height:200px;
  color:#fff;
  background:rgba(0,0,0,0.3);
  font-size:18px;
}
.slideback{
  position:absolute;
  color:#fff;
  left: 0;
  line-height:20px;
  font-size: 50px;
  cursor:pointer;
  font-weight: 600;
  margin-top: 240px;
  margin-left: 50px;
  background-color: #000;
  opacity: 0.6;
  width: 50px;
  height: 50px;
  line-height: 38px;
  text-align: center;
}
.slideback:hover,.slidenext:hover{
  font-size: 54px;
  font-weight: 600;
  opacity: 0.99;
  transition:100ms;
}

.slidenext{
  position:absolute;
  color:#fff;
  right: 0;
  line-height:20px;
  font-size: 50px;
  cursor:pointer;
  font-weight: 600;
  margin-top: 240px;
  margin-right: 50px;
  background-color: #000;
  opacity: 0.6;
  width: 50px;
  height: 50px;
  line-height: 38px;
  text-align: center;
  transition:300ms;
}

.slidelist{
  position: absolute;
  margin-top: 490px;
  margin-left: 30px;
}

.slidelist div{
  width: 9px;
  height: 9px;
  float: left;
  margin-right:10px;
  transition:300ms;
  border:3px solid #fff;
  border-radius: 10px;
}

.slidelist div.active{
  width: 18px;
  height: 18px;
  border:3px solid #fff;
  border-radius: 12px;
  margin-top: -5px;
}

The HTML part:

  <div class="slider-container">
    <?php $images = explode(',',$estate['image']);
     foreach($images as $image): ?>
    <div class="slide">
       <img style="width:100%;" src="<?=$image; ?>">
    </div>
     <?php endforeach; ?>
    <div class="slideback">&#171;</div>
    <div class="slidenext">&#187;</div>
    <div class="slidelist"></div>
</div>

[SamA74]

Your problem is too many “magic numbers” which never really work in RWD.
The trick to having a responsive image container keep its aspect ratio is to give it some vertical padding in %, then make the image fill it. The % in padding is relative to object width, so the object gets a height which relates to its width, thus keeping aspect.
So I change:-

height:530px;

to:-

padding-bottom: 65%;

The other thing is your nav buttons. They too are placed by magic numbers, so I would replace those with % values too and replace the margins with “sides”, as in change:-

margin-top: 240px;
margin-right: 50px;

to:-

top: 45%;
right: 5%;

Here is a rough example. I copy/pasted your code and changed a few bits, in reality I would change a whole lot, but this gives basic responsive functionality, enough to get the idea.

[ennio2]

Thanks, it’s working fine! I made some additional changes too considering your advice.