Home/ Questions/Q 8268199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:47:43+00:00

Edit: Found the answer, see my answer below. I was testing the waters with

  • 0

Edit: Found the answer, see my answer below.

I was testing the waters with different responsive grid frameworks which I would integrate into my website in the future.

I started off with Bootstrap (big following, updated often), but have came across a problem when testing it on Mobile devices.

First I tried it via http://screenqueri.es – everything looked fine, then tried it on my iPhone / iPad – again everything looked fine.

I then asked my friend to try on his Samsung GT I9000 Galaxy S and it’s pretty broken.

This first image is how it looks on iPhone / iPad / Browser window:
https://i.stack.imgur.com/SApW5.jpg

The next image is from Adobe Device Manager, this is how it looked on my friends phone:
https://i.stack.imgur.com/bZ7uc.jpg

Notice how the rule at the top (under the help button) stays within the constraints of the screen, but the box below seems to wonder off screen.

I’m using <meta name="viewport" content="width=device-width, initial-scale=1.0"> to ensure devices render the page properly.

Here’s my HTML:

<div class="container">
    <div class="row-fluid>
        <div class="span9></div>
        <div class="span3>Help button is here</div>
    </div>
    <div class="row-fluid>
        <div class="span6></div>
        <div class="span6></div>
    </div> 
</div>

The CSS is simply: http://twitter.github.com/bootstrap/assets/css/bootstrap.css + http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Both parts of the page are written exactly the same, yet display differently.

It can be solved using a fixed width for this device specifically, but I’d rather have something that works for all devices – as well I noticed Bootstrap doesn’t have this problem on their docs, so must be something I’m missing / doing wrong.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the problem – the box was using:

    * {
    box-sizing: border-box;
}

    My testing platforms were iOS5 and newest Chrome release, so didn’t need the prefix.

    On <= iOS4 and Android <= 2.3 this needs to be prefixed with -webkit-, if it’s not, it calculates the padding as it usually would (in my case making the width larger – pushing it out of the viewport).

    Here’s the source: http://paulirish.com/2012/box-sizing-border-box-ftw/

    Hopefully it helps someone out if they have the same issue.

    • 0