CODEWITHSUNDEEP
htmlcsstwitter-bootstrapscrollbarbrowser-scrollbars
dextervip
dextervip

Reputation: 5069

How to remove long horizontal scrollbar from HTML page

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

Upvotes: 2

Views: 14567

Answers (3)

Samuel Liew
Samuel Liew

Reputation: 79123

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

Upvotes: 11

Jonathan de M.
Jonathan de M.

Reputation: 9828

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

Upvotes: 2

Surinder ツ
Surinder ツ

Reputation: 1788

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

Upvotes: 1

Related Questions