Remove Scroll bars from the Responsive web page

Sanjay Singh
10y
12.7k
0
0

Blog

res.zip

Hello programmers, in my previous article Make Responsive Web Page Using Media Query in CSS we saw how to make responsive web page. But there is a problem, which is when we run it on our mobile devices or smart phones then there is a vertical scroll bar appear which occupy some space.

But we can remove this by using method overloading in the body of the style.

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>

Now the output on the mobile devices

Here we can see there is a vertical scroll bar appear.

Now I am going to remove this scroll bar-

<html>
<head>
<style>
body
{
background:#000;
color:#0F0;
overflow:hidden;
}
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>x
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>