Post
Ask Question

Remove Scroll bars from the Responsive web page

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 a responsive web page. But there is a problem, which is when we run it on our mobile devices or smartphones then there is a vertical scroll bar appear which occupies 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">  
  61.                 <br>  
  62.                     <h2>Founder :-</h2>  
  63.                     <h1>MR. MAHESH CHAND</h1>  
  64.                     <ul>  
  65.                         <li>  
  66.                             <a href="#">About Me</a>  
  67.                         </li>  
  68.                         <li>  
  69.                             <a href="#">Contact Me</a>  
  70.                         </li>  
  71.                         <li>  
  72.                             <a href="#">Follow Me</a>  
  73.                         </li>  
  74.                     </ul>  
  75.                 </header>  
  76.                 <article>    
  77. 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.    
  78. 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.    
  79. </article>  
  80.             </body>  
  81.         </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">  
  62.                 <br>  
  63.                     <h2>Founder :-</h2>  
  64.                     <h1>MR. MAHESH CHAND</h1>  
  65.                     <ul>  
  66.                         <li>  
  67.                             <a href="#">About Me</a>  
  68.                         </li>  
  69.                         <li>  
  70.                             <a href="#">Contact Me</a>  
  71.                         </li>  
  72.                         <li>  
  73.                             <a href="#">Follow Me</a>  
  74.                         </li>  
  75.                     </ul>  
  76.                 </header>  
  77.                 <article>x    
  78. 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.    
  79. 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.    
  80. </article>  
  81.             </body>  
  82.         </html>    
Output
 
a
  
Now, this is looking nice without a scroll bar.
Next Recommended Reading How To Add Icon To Your Web Page (FAVICON)