Media query to resize div and change font - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Media

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

Description

Media query to resize div and change font

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem</title> 
  <style>
body {<!--   w ww  .ja  v a  2  s .  c  o m-->
   font-weight:bold;
   font-family:sans-serif;
   font-size:21px;
   background:white;
}

.all {
   width:691px;
   margin:auto;
   margin-top:301px;
   background:blue;
}

@media only screen and (max-width: 700px)  {
   .all {
      width:201px;
      font-size:31px;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div class="all">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcor 
  </div>  
 </body>
</html>

Related Tutorials