how do you make your absolute-positioned elements responsive?

position them relatively to the container and then center the container:

var n = 20;

for (var i = 0; i < n; ++i) {
  var d = document.createElement('div');
  var r = 360 * i / n;
  var s = 'translate(-50%,-50%) rotate(' + r + 'deg) translate(0px, -80px)';

  d.setAttribute('class', 'box');
  d.setAttribute('style', '-webkit-transform:' + s);


  document.getElementById("container").appendChild(d);
}
#container {
  position: relative;
  margin:100px auto; /* 80x + 20px */
  width:200px; /* 2*80px + 2*20px */
}

.box {
  background: #d0d0d0;
  width: 20px;
  height: 30px;
  border-radius: 7px;
  position: absolute;
  border: 1px solid black;
  /* the below conmbined with the translate(-50%,-50%) in the JS will center */
  top:50%;
  left:50%;
}

.box:hover {
  background: red;
}
<div id='container'></div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top