Wie man einen Cicle vor einem Bild hinzufügt

Question

Ich versuche, einen Kreis (der Kreis enthält ein Symbol) vor einem Bild hinzuzufügen. Mein Code funktioniert gut, aber nur in großem Display; 1.224 und höher ... Dies ist jedoch nicht der Fall für Tablet und Handy ... Also, meine Frage ist: Wie kann ich meinen Code reparieren und es funktioniert für alle Geräte, ohne @media zu verwenden. Wenn @media die einzige Lösung ist, dann werde ich für ihn gehen ..

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:

Das ist, was ich versuche zu tun:

Deshalb verwende ich col-sm-3.

Answer 1

Wenn Sie Ihr service-circle Element in Ihrem service-bg bewegen, können Sie es dann ausrichten 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>