Mobile Layout Not Rendering Width: 100%

My first attempt using bootstrap on a webapp - this is how it renders on my iPhone.

Why is everything showing up under 100% width?

Example: The top of the page is called dark container, a wrapper with an image embedded, this is the css

#darkcontainer {
 height:200px;
 width:100%;
 border: none;
 background-color:whitesmoke;
 text-align:center;
}

My guess is that the image beneath(part of a slider) is pushing everything under 100% because it is much larger? That slider has the following css

#slides {
   height:500px;
   width:1065px;
   margin: 0 auto;
      ul.pagination {
          width:100%;
          text-align: center;
            li {
            display:inline-block;
            }
      }
}

        .slides_container {
            width:1065px;
            height:500px;


        }
        .slides_container div {
            width:1065px;
            height:500px;
            display:block;


        }

The mailing list looks like it would be different, because there is more of the background color there before it turns white, but that's just... a 100% width wrapper centering the child

#autoheightwrap {
   height:auto;
   width:100%;
   background-color:whitesmoke;
}
#mailform {
   height:100%;
   width:600px;
   margin: 0 auto;
   background-color: whitesmoke;
        padding: 6px 12px;

 ...

Feel free to look at the website in your browser here.

Any ideas why it is being rendered this way?

Answers

#slides is set at a width of 1065px. This is the culprit that is breaking your site. You'll have to restyle it with a media query targeting mobile.

For a more responsive friendly slideshow, might I suggest cycle2?

Need Your Help