Home/ Questions/Q 8354919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:42:17+00:00

I am working on a fixed width page using bootstrap and I noticed when

  • 0

I am working on a fixed width page using bootstrap and I noticed when testing it on iPhone the full width header and footer background were clipped to 70% of the width.

It’s Business marketing type site, frequented by people looking for a supplier, normally from their office PC so the responsive aspect was not a requirement but I digress.

Back to the problem

Viewing on a full size screen it looks as it should but if you scroll smaller than the limits of the container class (940px in this case) and then scroll back a little you can see the background has trimmed.

I have been tinkering with it for a while to the point where I have stripped everything out and just put in a simple bunch of nested divs to test and make sure the issue is not some rouge tag but it still does exactly the same thing.

I think the issue is related to items that are not wrapped in the class of container but if I need a full width panel and 940px fixed content I am not sure how I am going to achieve it with bootstrap.

// This Fails
<body>
    <header class="fullwidth">
        <div class="container">
            <p>The content</p>
        </div>
    </div>
</body>

// This is fine but not full width
<body>
    <header class="container">
        <p>The content</p>
    </header>
</body>

I have not adulterated bootstrap if I remove it or my styles together and restyle the body manually it goes away. But it seems to be a cumulative issue…

Anyone come across this before?

I don’t really want to have to strip bootstrap out if possible.

As requested I have appended the link:
http://jsfiddle.net/NcZFz/3/

If you notice in jsfiddle whatever size your viewport is the header will fill it, but the view port only. And if you are using a MAc and have a magic mouse (or whatever) you can scroll right in that view port to see white. But this is supposed to be edge to edge so there should be no white.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears you have a margin on the <ul id="menu-primary-navigation">

    #menu-primary-navigation { margin-left: 0; }

    And you should also put .clearfix on the same element (because children are floating)

    <ul id="menu-primary-navigation" class="clearfix">

    Check this working jsfiddle.

    All the above fixes could be avoided if you used the .navbar .nav classes (and associates) : read the doc.

    • 0