How to remove long horizontal scrollbar from HTML page

Question

I am starting one project using twitter bootstrap, however I got one issue. There is a long empty scrollbar horizontally. I can't find the problem, does anyone knows whats the problem?

Thanks

Solution 1

<style>
body {
  overflow-x: hidden !important;
}
body > * {
  max-width: 100% !important;
}
</style>

Solution 2

media="all"
style.css:1@media (min-width: 1200px)

.container, 
.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width: 1270px;
}

change to

.container, 
.navbar-static-top .container,
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width:auto;
}

Or remove the container class on your map on bottom, container is used to wrap the content and shouldn't be wrapped into an other container. Also container will take full width.

Place one anywhere within a .container, which sets the width of your site and content.

'bootstrap doc'

Check out the templates

Solution 3

Hope this helps !!

1) Add the following in header to enable responsive feature

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2) If you are using Container fluid

make proper use of row-fluid and span like:

<div class="container-fluid">
<div class="row-fluid">
    <div class="span2">
        <!--Sidebar content-->
    </div>
    <div class="span10">
        <!--Body content-->
    </div>
</div>

there may be some tag error here ..

3) forgot to add overflow-x hidden to body.

body {
    overflow-x: hidden;
}

LINK

Comments

[dextervip]

Ohh it works now but why that happens? I am coding wrong html/css?

[Bunny Joel]

This will just hide the browser scroll bar. The .row element will still be out of bounds and you will have problems with most mobile devices.