Move table cells or list items to second row depending on screen width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Move table cells or list items to second row depending on screen width

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">
header ul {<!--  w ww  .j  a  v a2  s . com-->
   width:100%;
   font-size:0;
   text-align:center;
}

header ul li {
   font-size:17px;
   display:inline-block;
   width:20%;
   min-width:8em;
   border:2px solid Chartreuse;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   -o-box-sizing:border-box;
   -ms-box-sizing:border-box;
   box-sizing:border-box;
}
</style> 
 </head> 
 <body> 
  <header> 
   <ul> 
    <li>Lore</li> 
    <li>Lorem i</li> 
    <li>Lorem ip</li> 
    <li>Lorem</li> 
    <li>Lorem i</li> 
   </ul> 
  </header>  
 </body>
</html>

Related Tutorials