HTML 5

Remove Scroll bars from the Responsive web page

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

  1. <html>  
  2. <head>  
  3. <style>  
  4. body  
  5. {  
  6. background:#000;  
  7. color:#0F0;  
  8. }  
  9. header  
  10. {  
  11. text-align:center;  
  12. }  
  13. img  
  14. {  
  15. border:7px solid #999;  
  16. }  
  17. h1  
  18. {  
  19. font-size:40px;  
  20. }  
  21. ul  
  22. {  
  23. background:rgba(255,8,200,0.5);  
  24. padding:10px;  
  25. }  
  26. li  
  27. {  
  28. display:inline;  
  29. padding:10px;  
  30. margin:10px;  
  31. font-size:18px;  
  32. }  
  33. a  
  34. {  
  35. color:#0FF;  
  36. }  
  37. article  
  38. {  
  39. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
  40. max-width:500px;  
  41. margin:0 auto;  
  42. }  
  43. @media(max-width:500px)  
  44. {  
  45. h1  
  46. {  
  47. font-size:18px;  
  48. padding:5px;  
  49. }  
  50. li  
  51. {  
  52. display:block;  
  53. padding:5px;  
  54. }  
  55. }  
  56. </style>  
  57. </head>  
  58. <body>  
  59. <header>  
  60. <img src="CSCLogo.png" width="200"><br>  
  61. <h2>Founder :-</h2>  
  62. <h1>MR. MAHESH CHAND</h1>  
  63. <ul>  
  64. <li><a href="#">About Me</a></li>  
  65. <li><a href="#">Contact Me</a></li>  
  66. <li><a href="#">Follow Me</a></li>  
  67. </ul>  
  68. </header>  
  69. <article>  
  70. 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.  
  71. 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.  
  72. </article>  
  73. </body>  
  74. </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-

  1. <html>  
  2. <head>  
  3. <style>  
  4. body  
  5. {  
  6. background:#000;  
  7. color:#0F0;  
  8. overflow:hidden;  
  9. }  
  10. header  
  11. {  
  12. text-align:center;  
  13. }  
  14. img  
  15. {  
  16. border:7px solid #999;  
  17. }  
  18. h1  
  19. {  
  20. font-size:40px;  
  21. }  
  22. ul  
  23. {  
  24. background:rgba(255,8,200,0.5);  
  25. padding:10px;  
  26. }  
  27. li  
  28. {  
  29. display:inline;  
  30. padding:10px;  
  31. margin:10px;  
  32. font-size:18px;  
  33. }  
  34. a  
  35. {  
  36. color:#0FF;  
  37. }  
  38. article  
  39. {  
  40. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
  41. max-width:500px;  
  42. margin:0 auto;  
  43. }  
  44. @media(max-width:500px)  
  45. {  
  46. h1  
  47. {  
  48. font-size:18px;  
  49. padding:5px;  
  50. }  
  51. li  
  52. {  
  53. display:block;  
  54. padding:5px;  
  55. }  
  56. }  
  57. </style>  
  58. </head>  
  59. <body>  
  60. <header>  
  61. <img src="CSCLogo.png" width="200"><br>  
  62. <h2>Founder :-</h2>  
  63. <h1>MR. MAHESH CHAND</h1>  
  64. <ul>  
  65. <li><a href="#">About Me</a></li>  
  66. <li><a href="#">Contact Me</a></li>  
  67. <li><a href="#">Follow Me</a></li>  
  68. </ul>  
  69. </header>  
  70. <article>x  
  71. 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.  
  72. 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.  
  73. </article>  
  74. </body>  
  75. </html> 

Output



Now this is looking nice without scroll bar.

Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs