Make the item active when a media request is made - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Media

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

Description

Make the item active when a media request is made

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
div:nth-child(1) {
   background:Chartreuse;
   color:yellow;
}

div:nth-child(2) {
   background:blue;
   color:pink;
}

#media_wrapper {<!--from w  ww.  ja  v a 2  s .c  o  m-->
   height:100%;
   display:none;
}

@media only screen and (max-width: 480px)  {
   #media_wrapper {
      height:100%;
      display:inline-block;
      width:100%;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="media_wrapper">
    Lorem 
  </div> 
  <div>
    Lorem 
  </div>  
 </body>
</html>

Related Tutorials