The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Does anybody know why iPhone 6 renders width: 50% differently?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #210603


    Please have a look at his:

    There are no special media queries for iPhone 6 in my CSS.

    Link is here:

    I’m using Chrome dev tools device feature.

    Thanks :)


    My guess is that is has to do with the fact that the iPhone 6 screen’s width is an odd number (375, at least in the Chrome emulator), so half-pixels come into account and that always gives unexpected results; also, consider the fact that you can’t fully emulate a retina screen (where 1 pixel is actually 2 pixels).

    Each column ends up being 182.5 pixels wide (half of the wrapper, which is 365), which (probably) translates into 183 actual pixels because it rounds up. Having two columns of 183 doesn’t fit into the available space of 365 pixels of the wrapper, so it wraps.

    For the iPhone 5, the screen is 320 wide. The wrapper ends up being 310, and each column is 155. No dealing with half-pixels, rounding off, etc.

    Not sure if this is also the same behavior on an actual iPhone 6 though!


    @senff, thank you for reply.

    Ya, I saw that one column is 182.5 px wide and thought that this might be the problem, but have a look at this pen:

    Same scenario, but it works ok, columns align 2 per row.
    That is weird. Is there any fix for that?


    I have to admit I don’t really understand the exact specifics of why it works on one but not the other, and please note that it’s just a guess what I wrote above. An educated one, but a guess nonetheless.

    When stuff like this happens to me, I always add a little extra to make sure it won’t happen. In this case, I would probably just give the wrapper an actual width in pixels, and make sure it’s an even amount or something. Like giving it a width of 370px, something like that.


    Unfortunately this seems to be a bug with Isotope. If you remove the absolute positioning the elements fit just fine.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.