0

I have a built a site for a New Zealand non-profit. It's based on Bootstrap 3 with responsive features disabled. It's working well... except for the way that the background images for outer divs display on mobile Safari. Here is an example of the code:

<div class="top">
    <div class="container">
        <div class="row">
            <div class="columns go here">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

.top {
    height: 47px; 
    background-color: #000;
}

But when I view the site using mobile Safari the wrapper div (.top) does not appear to fill the full width of the screen.

Here's the site: http://betterbroadcasting.co.nz/

And here's a screengrab from mobile Safari: https://dl.dropboxusercontent.com/u/35912963/IMG_2746.PNG

I'd really appreciate any insight into what I may be doing wrong here. Thank you.

Dan Fyles
  • 5
  • 2

1 Answers1

1

Do you have a meta viewport tag?

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

Otherwise experiment with changing min-width as suggested in this thread.

Community
  • 1
  • 1
Kyle Cureau
  • 19,028
  • 23
  • 75
  • 104
  • According to the Bootstrap non-responsive template example page here http://getbootstrap.com/examples/non-responsive/ there's no need for the meta viewport tag. But having read the thread you linked to I have added min-width to the full-width divs, at the same value as the container div. Thank you for your help! – Dan Fyles Jan 22 '15 at 03:02