- This topic is empty.
-
AuthorPosts
-
November 6, 2015 at 2:48 am #210603
rolandas
ParticipantHi,
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 #210604Senff
ParticipantMy 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 #210606rolandas
Participant@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: http://s.codepen.io/rolandas/debug/EVevJx
Same scenario, but it works ok, columns align 2 per row.
That is weird. Is there any fix for that?November 6, 2015 at 8:16 am #210613Senff
ParticipantI 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 #234648TheDoc
MemberUnfortunately this seems to be a bug with Isotope. If you remove the absolute positioning the elements fit just fine.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.