Problem with backgrounds on iPhone

madeby commented 12 years ago

I have a page: http://p.moviemail.in/day29

Which has a problem on iPhone: http://www.responsinator.com/?url=p.moviemail.in%2Fday29

The white stripe around the poster is not correct. It should look like "iPad landscape 1024 x 768" on the same page.

I add the background by adding a div around the "container" div. I give it this style:

.darkBg { background: transparent url(/img/bg/denim.png') 0 0 repeat; }

Ex.:

<div class="darkBg">
    <div class="container poster">

mckramer commented 12 years ago

There a few issues. First up, the image is wider than the container. You should limit its size.

As far as the white space on the left and right sides, bootstrap adds that as part of its responsive css.

@media (max-width: 767px) {
  // Padding to set content in a bit
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

It also can be blamed for adding the white space below the header:

@media (max-width: 979px) {
  .navbar-fixed-top {
    margin-bottom: 18px;
  }
}

These are styles on purpose. You can override these bootstrap styles if you hate them. A quick option would be to just throw the darkBg class up on the <body> element. That is probably what you want anyway.

mdo commented 12 years ago

Sorry, we cannot provide support for custom implementations of Bootstrap if they are not specific bugs or feature requests. Please ask on mailing list or open a new issue detailing any bugs or requests you're trying to point out with included examples.

twbs / bootstrap

Problem with backgrounds on iPhone #3995