Make Responsive Web Page Using Media Query in CSS

Sanjay Singh

6y20.7k10100Article

CSS media queryCSS Responsive web pagemedia queryResponsive web page

10 Comments

Join the conversation! Your thoughts help the community grow.

Subash10y ago
Good work
Vithal Wadje12y ago
good one
- Sanjay Singh12y ago
  thanks sir
Sanjay Singh12y ago
thanks kamlesh sir....
kamlesh yadav12y ago
very very helpful aricle..
Sanjay Singh12y ago
you can see it on http://www.c-sharpcorner.com/Blogs/15994/remove-scroll-bars-from-the-responsive-web-page.aspx here i user overflow:hidden to remove the scrollbar...
Sanjay Singh12y ago
thanks mahesh sir... if we use "overflow:hidden" in the css body then we can remove scroll bar.... is it right sir?
Mahesh Chand12y ago
Good work Sanjay. On mobile device, most of them are touch, how do you remove the scroll bar? I guess it will be nice to get the screen size of mobile and fit within it. Cheers!
Sanjay Singh12y ago
thanks sir..
Gopi Chand12y ago
nicely illustrated..

Introduction

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 the founder of C# Corner. C# Corner founded in 1999 is a FREE member contribution based open platform for developers to solve problems, learn new technology and hang out.
Mahesh has been awarded the 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 the computer system

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

Here in the mobile device, the content is not in 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 the founder of C# Corner. C# Corner founded in 1999 is a FREE member contribution based open platform for developers to solve problems, learn new technology and hang out.
Mahesh has been awarded the 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>

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.