- This topic is empty.
November 6, 2015 at 2:48 am #210603rolandasParticipant
Please have a look at his: http://recordit.co/0SPdeM2FSQ
There are no special media queries for iPhone 6 in my CSS.
Link is here: http://naujas.klaipedosleliuteatras.lt/musu-kurejai/
I’m using Chrome dev tools device feature.
Thanks :)November 6, 2015 at 3:42 am #210604SenffParticipant
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!November 6, 2015 at 3:53 am #210606rolandasParticipantNovember 6, 2015 at 8:16 am #210613SenffParticipant
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.November 6, 2015 at 9:56 pm #234648TheDocMember
Unfortunately this seems to be a bug with Isotope. If you remove the absolute positioning the elements fit just fine.
- The forum ‘CSS’ is closed to new topics and replies.