Make Responsive Web Page Using Media Query in CSS

Hello programmers, we are all familiar with the basics of HTML5 and CSS3 but when we make a web page using only HTML and CSS (without media query) then the site is not responsive.

What is a responsive web page? A responsive web page means the user interface or front end of the web page looks the same, whether we use a computer system, a tablet or a mobile device.

Code without CSS media query

  1. <html>  
  2. <head>  
  3.     <style>  
  4.         body {  
  5.             background: #000;  
  6.             color: #0F0;  
  7.         }  
  8.         header {  
  9.             text-align: center;  
  10.         }  
  11.         img {  
  12.             border: 7px solid #999;  
  13.         }  
  14.         h1 {  
  15.             font-size: 40px;  
  16.         }  
  17.         ul {  
  18.             background: rgba(255,8,200,0.5);  
  19.             padding: 10px;  
  20.         }  
  21.         li {  
  22.             display: inline;  
  23.             padding: 10px;  
  24.             margin: 10px;  
  25.             font-size: 18px;  
  26.         }  
  27.         a {  
  28.             color: #0FF;  
  29.         }  
  30.         article {  
  31.             font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  32.             max-width: 500px;  
  33.             margin: 0 auto;  
  34.         }  
  35.     </style>  
  36. </head>  
  37. <body>  
  38.     <header>  
  39.         <img src="CSCLogo.png" width="200"><br>  
  40.         <h2>Founder :-</h2>  
  41.         <h1>MR. MAHESH CHAND</h1>  
  42.         <ul>  
  43.             <li><a href="#">About Me</a></li>  
  44.             <li><a href="#">Contact Me</a></li>  
  45.             <li><a href="#">Follow Me</a></li>  
  46.         </ul>  
  47.     </header>  
  48.     <article>  
  49.         Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.  
  50.         Mahesh has been awarded prestigious Microsoft MVP Award for 9 consecutive years for his contributions to the developer community. Mahesh is also an author of several programming books. Mahesh authored and published his first book A Programmer's Guide to ADO.NET in C# with APress at the age of 25. Since then, mahesh went on to author several more .NET programming books.  
  51.     </article>  
  52. </body>  
  53. </html> 

Output on computer system



Now If we get the output in a mobile device then:



Here in the mobile device the content is not at the right position.

Now we use media query of CSS

  1. <html>  
  2. <head>  
  3.     <style>  
  4.         body {  
  5.             background: #000;  
  6.             color: #0F0;  
  7.         }  
  8.   
  9.         header {  
  10.             text-align: center;  
  11.         }  
  12.   
  13.         img {  
  14.             border: 7px solid #999;  
  15.         }  
  16.   
  17.         h1 {  
  18.             font-size: 40px;  
  19.         }  
  20.   
  21.         ul {  
  22.             background: rgba(255,8,200,0.5);  
  23.             padding: 10px;  
  24.         }  
  25.   
  26.         li {  
  27.             display: inline;  
  28.             padding: 10px;  
  29.             margin: 10px;  
  30.             font-size: 18px;  
  31.         }  
  32.   
  33.         a {  
  34.             color: #0FF;  
  35.         }  
  36.   
  37.         article {  
  38.             font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  39.             max-width: 500px;  
  40.             margin: 0 auto;  
  41.         }  
  42.   
  43.         @media(max-width:500px) {  
  44.             h1 {  
  45.                 font-size: 18px;  
  46.                 padding: 5px;  
  47.             }  
  48.   
  49.             li {  
  50.                 display: block;  
  51.                 padding: 5px;  
  52.             }  
  53.         }  
  54.     </style>  
  55. </head>  
  56. <body>  
  57.     <header>  
  58.         <img src="CSCLogo.png" width="200"><br>  
  59.         <h2>Founder :-</h2>  
  60.         <h1>MR. MAHESH CHAND</h1>  
  61.         <ul>  
  62.             <li><a href="#">About Me</a></li>  
  63.             <li><a href="#">Contact Me</a></li>  
  64.             <li><a href="#">Follow Me</a></li>  
  65.         </ul>  
  66.     </header>  
  67.     <article>  
  68.         Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.  
  69.   
  70.         Mahesh has been awarded prestigious Microsoft MVP Award for 9 consecutive years for his contributions to the developer community. Mahesh is also an author of several programming books. Mahesh authored and published his first book A Programmer's Guide to ADO.NET in C# with APress at the age of 25. Since then, mahesh went on to author several more .NET programming books.  
  71.     </article>  
  72. </body>  
  73. </html> 

Now the output in the mobile devices



So we can say that the media query of CSS is very, very helpful to make responsive web pages.

Up Next
    Ebook Download
    View all
    Learn
    View all