Force a column to take full width within a specific window width range - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Force a column to take full width within a specific window width range

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"> 
  <style id="compiled-css" type="text/css">

@media only screen and (min-width: 320px) {
   .row .col.m4 {
      width: 33.33333%;
      margin-left: 0;
   }<!--   w ww.j a v a 2  s  . c  o  m-->
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="section"> 
    <div class="row"> 
     <div class="col s12 m4"> 
      <div class="icon-block z-depth-2"> 
       <h2 class="center red-text"> <i class="mdi-action-description"></i> </h2> 
       <h5 class="center">Content Title 1</h5> 
       <p class="light"> content Text 1 </p> 
      </div> 
     </div> 
     <div class="col s12 m4"> 
      <div class="icon-block z-depth-2"> 
       <h2 class="center red-text"> <i class="mdi-action-settings"></i> </h2> 
       <h5 class="center">Content Title 2</h5> 
       <p class="light"> content Text 2 </p> 
      </div> 
     </div> 
     <div class="col s12 m4"> 
      <div class="icon-block z-depth-2"> 
       <h2 class="center red-text"> <i class="mdi-action-help"></i> </h2> 
       <h5 class="center">Content Title 3</h5> 
       <p class="light"> content Text 3 </p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
 </body>
</html>

Related Tutorials