Make Responsive Web Page Using Media Query in CSS

Sanjay Singh
Aug 02, 2014
11k
0
3
Article

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

<html>
<head>
<style>
body {
background: #000;
color: #0F0;
}
header {
text-align: center;
}
img {
border: 7px solid #999;
}
h1 {
font-size: 40px;
}
ul {
background: rgba(255,8,200,0.5);
padding: 10px;
}
li {
display: inline;
padding: 10px;
margin: 10px;
font-size: 18px;
}
a {
color: #0FF;
}
article {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
<img src="CSCLogo.png" width="200"><br>
<h2>Founder :-</h2>
<h1>MR. MAHESH CHAND</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Follow Me</a></li>
</ul>
</header>
<article>
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.
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.
</article>
</body>
</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

<html>
<head>
<style>
body {
background: #000;
color: #0F0;
}
header {
text-align: center;
}
img {
border: 7px solid #999;
}
h1 {
font-size: 40px;
}
ul {
background: rgba(255,8,200,0.5);
padding: 10px;
}
li {
display: inline;
padding: 10px;
margin: 10px;
font-size: 18px;
}
a {
color: #0FF;
}
article {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 500px;
margin: 0 auto;
}
@media(max-width:500px) {
h1 {
font-size: 18px;
padding: 5px;
}
li {
display: block;
padding: 5px;
}
}
</style>
</head>
<body>
<header>
<img src="CSCLogo.png" width="200"><br>
<h2>Founder :-</h2>
<h1>MR. MAHESH CHAND</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Follow Me</a></li>
</ul>
</header>
<article>
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.
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.
</article>
</body>
</html>