Working on a site rebuild and throughout the site, columns are failing to stack on the iPhone XR although they look fine on both larger and smaller iPhones. I have tested SE, 6s, 7 Plus and 8 - all good. I’m hazarding a guess this has something to do with edge to edge screens and/or higher resolution on newer phones? Any ideas? Should add I am using the standard RW columns and have them set to stack on mobile devices only. I appreciate the breakpoint control isn’t exactly fine-tuned!
The XR screen is the same width as an 8+ (414px). The built-in column stacks consider mobile devices to be 400px or less, so these phones are not treated as mobile with the built-in stacks.
Phone screen sizes have been getting larger, and now the screen size breaks, that Stacks has used for years, don’t quite work well in these cases. You’ll have to see if @isaiah has any plans to adjust the mobile break point up a bit to cover these slightly larger devices, or if you’ll need to use a different column stack.
But the 8 Plus and 7 Plus are the same screen and my 7 Plus works fine? Must be like a 1 pixel difference?
Hmm, that’s odd. All the plus phones (6, 6S, 7, 8) all have 414 logical pixels, which is what trigger the breakpoints. The XR has the width, but is just taller. I tested and the Stacks’ built in columns stack triggers the tablet breakpoint at 401px. Your 7 Plus should act the same way.
https://kapeli.com/cheat_sheets/iOS_Design.docset/Contents/Resources/Documents/index
The logical resolution are the key numbers.
1 Like
Did you select „larger display mode“ or what it may be called in the iOS settings to make the text and items larger on the XR?
@Fuellemann good question but as not my XR I’m not sure. However, I got my daughter to test hers and she definitely wouldn’t have the larger text. Anyway, I have set the columns to stack on ipad as well as mobile which is a decent solution for now.
Then I’ll go look at some alternative columns - suggestions welcome. Must have up to 5 cols. Not Joe Workman’s (which I have already) as the 3 and 5 cols don’t break appear in original order which I must have for this site. And not Foundation only as this site is not foundation. Cheers
Doobox reflow is the best columns stack to my mind.
Simple, fast and just works without fuss.
1 Like
Yes it’s good but only up to 4 columns
It’s always possible to put columns within columns but I’d prefer a 5 column stack. It could work perfectly well but if I can’t test it first… I’m concerned about how the 2nd stack relates to the first. Happy to be put right on this however!
How do you want your columns to stack on mobile?
Do you want them in order, 1-5? If so, A 2-column stack holding a 3-column and a 2-column stacks should work fine. The outer 2-column stack would place the first 3 columns first and the last two columns second. The inner columns would work the same.
If you’re trying to re-arrange the columns when they stack, then we’d need to know what you’re trying to do.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.