make div responsive - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

make div responsive

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.background1 {
   width:100%;
}

.im1 {<!--from ww  w.j a  v  a2s  .  com-->
   margin-top:11px;
   z-index:2;
   width:100%;
   font-size:0;
}

.im1 img {
   position:relative;
   display:inline-block;
}

.car {
   width:26%;
   z-index:2;
}

.vs {
   margin:0 -31px 31px;
   z-index:100;
}

@media only screen and (max-width: 768px) {
   .car {
      width:51%;
   }

}

@media only screen and (max-width: 480px) {
   .car {
      width:100%;
   }
   
   .vs {
      display:block!important;
      margin:-21px auto;
   }

}
</style> 
 </head> 
 <body> 
  <section id="COMPARE" style="margin-left: 100px;"> 
   <div class="container"> 
    <div class="col-md-12 background1"> 
     <div class="im1 col-md-3" style="position:relative; margin-left:40px;"> 
      <img class="car" src="https://www.java2s.com/style/demo/Firefox.png"> 
      <img class="vs" src="https://www.java2s.com/style/demo/Safari.png" width="55px" height="55px"> 
      <img class="car" src="https://www.java2s.com/style/demo/Firefox.png"> 
      <img class="vs" src="https://www.java2s.com/style/demo/Safari.png" width="55px" height="55px"> 
      <img class="car" src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
      <img class="vs" src="https://www.java2s.com/style/demo/Google-Chrome.png" width="55px" height="55px"> 
      <img class="car" src="https://www.java2s.com/style/demo/Opera.png"> 
     </div> 
    </div> 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials