Как сделать следующий div отзывчивым

Question

I want to make this responsive ** Я разработал это в html и css, и я хочу сделать этот div отзывчивым ... Как я могу это сделать?

Я попытался с помощью начальной загрузки колонны, но он не работает

А также скажите мне, как сделать фон реагировать, если он имеет фоновое изображение фиксированной высоты.

.im1 
 
{ 
 
    /*padding: 10px;*/ 
 
    /*margin-left: 60px;*/ 
 
    margin-top: 10px; 
 
    z-index: 1; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-right: -80px; 
 
} 
 

 
.background1 { 
 
    background: url("../car/car_web.jpg"); 
 
    /*border: 2px solid black;*/ 
 
    width:1380px; 
 
    height:350px; 
 
    background-repeat: no-repeat; 
 
    padding: 50px; 
 
    padding-top: 10px; 
 
    padding-left: 130px; 
 
    left: 0px; 
 
    /*position: absolute;*/ 
 
    /*top: 20px;*/ 
 
    margin-left: -155px; 
 
    
 
}

<section id="COMPARE" style="margin-left: 100px;"> 
 
    <div class="container"> 
 
    <div class="col-md-12 background1"> 
 
     <label class="ll"> 
 
     <center><small><strong>Car Comparison lorims info</strong></small> 
 
     <h3>Compare Cars</h3> 
 
     </center> 
 
     </label><br> 
 
      
 
<div class="im1 col-md-3" style="position:relative; margin-left:40px;"> 
 
       <img class="" src="car/1.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:80px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:260px; z-index:3;"> 
 
       <img class="" src="car/2.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:300px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:480px; z-index:3;"> 
 
       <img class="" src="car/3.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:520px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:700px; z-index:3;"> 
 
       <img class="" src="car/4.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:740px;"> 
 
      </div> 
 
      
 
      
 
      <div class="col-md-12 de" id="compare"> 
 
      <button type="submit" class="btn btn-primary12 btn-lg outline1 " name="login">COMPARE CARS</button></span> 
 
      <br> 
 
      <br> 
 
      <small><strong>Or <a href="#">Click here for custom comparison</a></strong></small> 
 
      </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Это очень трудно понять этот вопрос, не глядя на то, как вы закодированы это unfortu вы могли бы скопировать код, чтобы мы могли видеть, как у вас есть настройки?

Однако, я отдам его. Я буду считать, что четыре машины находится в оберточном DIV и что вы хотите, чтобы изображения транспортных средств, чтобы упасть ниже друг с другом, когда окно становится меньше .. что-то вроде этого:

/* Standard size */ 
.carImage{ 
    width: 25%; 
} 

/* Tablet Size */ 
@media only screen and (max-width: 768px) { 
    .carImage{ 
     width: 50%; 
    } 
} 

/* Mobile Size */ 
@media only screen and (max-width: 480px) { 
    .carImage{ 
     width: 100%; 
    } 
} 

Изменения .carImage для любого класса, который у вас есть для каждого изображения автомобиля, - но еще раз я не могу сказать точную проблему, если вы не вставляете свой код. Если это не поможет скопировать код, и я попробую еще раз.

EDIT: После глядя на коде, который вы послали:

https://jsfiddle.net/o05yvL1h/3/

Я бы не использовать position: absolute; в том, как вы сделали это, я не использую его очень часто лично, так может быть, это не поможет, но, возможно, это будет - просто быстрый пример того, как вы можете это сделать. Я изменил источники изображений только для примера. Надеюсь, это поможет ...

Answer 2

https://jsfiddle.net/o05yvL1h/
https://jsfiddle.net/o05yvL1h/2/

div { 
 
    display: inline-block; 
 
    width: 23%; 
 
    width: calc(25% - 1em); 
 
    margin: 1em .5em; 
 
    background: silver; 
 
    line-height: 4em; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
div + div:after { 
 
    content: "VS"; 
 
    line-height: 2em; 
 
    width: 2em; 
 
    margin: -1em; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    background: blue; 
 
    color: white; 
 
    top: 50%; 
 
    left: -.5em; 
 
} 
 

 
@media all and (max-width: 320px) { 
 
    div { 
 
    display: block; 
 
    width: auto; 
 
    } 
 
    
 
    div + div:after { 
 
    top: -.5em; 
 
    left: 50%; 
 
    } 
 
}

<div> 
 
    1 
 
</div><div> 
 
    2 
 
</div><div> 
 
    3 
 
</div><div> 
 
    4 
 
</div>