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

How to disable struts 2 Table generation for Form?

java struts2

Struts 2 automatically generate HTML table for it's <s:form> tag. How can I disable it? Any help will be appreciated. Thank You.

how to detect paste event in excel

excel vba excel-vba

I need to detect paste command of excel. Is there any work around which can tell us when user click the paste on the menu pop up from the left mosue button click. This is required me to execute a

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.