画像の前に円を追加する方法

Question

画像の前に円を追加しようとしています（円にはアイコンが含まれています）。私のコードは正常に動作しますが、大きな表示でのみ動作します。しかし、これはタブレットとモバイルの場合ではありません...だから私の質問は：@mediaを使わずに、コードを修正してすべてのデバイスで動作させるにはどうすればいいですか？ @mediaが唯一の解決策であるならば、私はそれのために行くだろう。..

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：

これは私がやろうとしているものです：

したがって、私はcol-sm-3を使用しています。

Answer 1

あなたのservice-bgの内側にあなたのservice-circle要素を移動した場合、あなたはその後、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>