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


i'm experimenting privately adding bootstrap simple website. it's working pretty out of box, save 1 strange phenomenon: page wide on small screen size. here's screenshot htc one:

enter image description here

it looks okay when load because zooms in content, if scroll or down , accidentally move finger right, horizontal scroll activates. screenshot shows manual zoom out.

i assumed had element on page wide. when loaded page in browser , resized browser smallest possible size, still see this. however, when inspect elements, see top-level <html> tag 400px wide:

enter image description here

i'm using basic viewport:

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

what's going on here? i've never seen page wider <html> container.

edit, march 14, 4:05pm: example, have bootstrap version of site live here:

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

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

remove 2 css rules , problem should fixed


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -