Why is a basic Twitter bootstrap page too wide on a smart phone?

StackOverflow https://stackoverflow.com/questions/16532235

Question

I'm experimenting privately with adding Bootstrap to my simple website. It's working pretty well out of the box, save for one strange phenomenon: The page is too wide on the small screen size. Here's a screenshot from my HTC One:

enter image description here

It looks okay when you load it because it zooms in to just the content, but if you scroll up or down and accidentally move your finger to the right, the horizontal scroll activates. The screenshot shows a manual zoom out.

I assumed I had some element on the page that was too wide. But when I loaded the page in a browser and resized that browser to the smallest possible size, I still see this. However, when I inspect the elements, I see that even the top-level <html> tag is only 400px wide:

enter image description here

I'm using the basic viewport:

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

What's going on here? I've never seen a page be wider than its <html> container.

Edit, March 14, 4:05PM: As an example, I have the bootstrap version of the site live here:

http://labs.mechanicalscribe.com/notes/wikipedia-music-transcriptions/

Was it helpful?

Solution 

kicker{
left: 15px;
width: 800px;
}

remove those two css rules and your problem should be fixed

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top