Responsive Absolute Div's

by zuhloobie

HTML

<div class="coreTitleCircleContainer">
  <div class="coreTitleContainer">
    <div class="coreCircleContainer">
      <div class="coreCircle">
      </div>
    </div>
    <div class="coreTitle">1
    </div>
  </div>
</div>

CSS

.coreTitleCircleContainer {position:relative; width:80%; max-width:1100px; margin:0 auto; }
.coreTitleContainer {position:relative; height:50px; width:100%; max-width:1100px; background:#F00; margin:50px auto; text-align:right;}
.coreCirclecontainer {width:100%; height:100%; z-index:50; position:relative;}
.coreCircle {width:144px; height:144px; border-radius:72px; background-color:#4D4D4D; position:absolute; clip:rect(0px,144px,30px,0px); bottom:-64px; right:20px;  }
.coreTitle {position:relative; width:144px; height:25px; color:white; text-align:right; display:inline-block; margin-right:80px;}
.coreTitle:after {text-align:center; width:25px; height:25px; color:black; display:inline-block; content:'2'; margin-left:20px;}
.coreTitle:before {text-align:center; width:25px; height:25px; color:black; display:block; content:'2'; display:none;}

@media only screen and (max-width:1000px) {
  .coreTitleContainer {text-align:center;} 
  .coreCircleContainer {text-align:center; margin:auto; width:100%; left:0; right:0;}
  .coreCircle {right:0; left:0; bottom:-64px; margin:auto; overflow:auto; }
  .coreTitle {text-align:center; display:block; margin:0 auto;}
  .coreTitle:after {display:none;}
  .coreTitle:before {display:block; margin:0 auto; width:100%;}
}