How to add a cicle in front of an image - html

Question

I'm trying to add a circle (the circle will contains an icon) in front of an image. My code works fine, but only in big display; 1,224 and up..However, this is not the case for tablet and mobile...So, my question is: How can I fix my code and make it works for all devices, without using #media. If #media is the only solution, then I will go for it..
HTML
<div class="row">
<div class="col-md-3">
<div class="service-box">
<div class="service-circle" >
<!--Add icon inside circle -->
</div>
<div class="service-bg" style="background-color: black;">
<!-- Insert img-->
</div>
<div class="service-text">
<h3>
ENTER TITLE
</h3>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
CSS/LESS
.service-box {
.service-circle{
width: 120px;
height: 120px;
border-radius: 50%;
display: table-cell;
vertical-align: middle;
color: #000;
line-height: 500px;
text-align: center;
background: #fff;
position: absolute;
left: 30%;
margin-top: 65%;
border: 5px solid #e6ab43;
}
.service-bg {
height: 250px;
border:1px solid black;
img{
height: 100%;
}
}
.service-text {
text-align: center;
margin-top: 30%;
}
}
UPDATE:
This is what I'm trying to do:
Therefore, I'm using col-sm-3.

Answer 1

If you move your service-circle element inside your service-bg, you can then align it using transform: translate
.service-box {
background: red;
}
.service-bg {
position: relative; /* added */
height: 250px;
border:1px solid black;
}
img{
height: 100%;
}
.service-circle{
width: 120px;
height: 120px;
border-radius: 50%;
color: #000;
background: #fff;
position: absolute;
left: 50%; /* added */
top: 100%; /* added */
transform: translate(-50%,-50%); /* added */
border: 5px solid #e6ab43;
}
.service-text {
text-align: center;
margin-top: 80px; /* changed */
}
<div class="row">
<div class="col-md-3">
<div class="service-box">
<div class="service-bg" style="background-color: black;">
<!-- Insert img-->
<div class="service-circle">
<!--Add icon inside circle -->
</div>
</div>
<div class="service-text">
<h3>
ENTER TITLE
</h3>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>