In this tutorial we will show you the solution of remove horizontal scrollbar CSS, as we know css used to style html elements, here we used internal style method to remove horizontal scroll bar.
Usually overflow occurs on either horizontal or vertical side by long size image or text.
There scroll bar will appeared by default so we need to hide scroll bar to avoid uneven proper alignment of page and we can hide both side of scroll bar easily using css.
Step By Step Guide On Remove Horizontal Scrollbar CSS :-
In our program we defined one header using <h1> tag and below that we just copied some text then pasted multiple times to make paragraph using <p> tag.
Then we sets width of the paragraph to maximum size of ‘5000px’ because we need to make overflow on horizontal side then only horizontal scroll bar will appear at bottom side of webpage after that we can use ‘overflow-x’ style property to remove horizontal scroll bar by value ‘hidden’.
<!DOCTYPE html>
<html>
<head>
<title>REMOVE HORIZONTAL SCROLLBAR</title>
<style>
body{
width: 5000px;
overflow-x: hidden;
}
</style>
</head>
<body>
<h1>SAMPLE PARAGRAPH</h1>
<p>Our products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignment Our products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignment Our products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products
Timely Delivery of the consignmentOur products are highly reliable and durable.
Guidance from our owners who Possess great experience in the field.
Our products are sold on the competitive prices with no compromise with the quality
Wide range of products Timely Delivery of the consignment</p>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- In <style> tag we defined styles for body element there we sets width to ‘5000px’ because we needs maximum width space to occupy paragraph at most right side of page then only horizontal scroll bar will appear.
- Finally using ‘overflow-x’ property value ‘hidden’ to hides the horizontal scroll bar and also we can’t see remaining part of paragraph because it can’t scroll now.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined one heading and wide paragraph using respective ‘<h1>, <p>’ tags.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to remove horizontal scroll bar using css.
When we execute this program on browser there we can see heading and paragraph will display at most right side of page because we sets maximum width then we can’t see some of paragraph also because we hides horizontal scroll bar.
Not only horizontal scroll bar we can hide vertical scroll bar also by using ‘overflow-y:hidden’ property later we will see about that.
I hope this tutorial on remove horizontal scrollbar CSS helps you and the steps and method mentioned above are easy to follow and implement.
