Columns not displaying correctly on iPhone 6Plus - can someone check on their device please

Foundry
1

Hi all,

I’m struggling to work out why the 4 column stack is not displaying correctly on a iPhone 6Plus but is correctly on a iPhone 6.

it is a Foundry Column stack set to 4 columns and set to 6 width columns on Mobile and 3 width on Tablet and Desktop.

So on Mobile size screens I have 2 rows and on Tablet and Desktop all 4 in one row.

Link to page https://ambercare.rapidwebsites.net

I have Advanced > Equal Height Columns ticked.

46%20pm
46%20pm2380×1400 426 KB

08%20pm
08%20pm640×1462 85.8 KB

This is on my iPhone 6 Plus - Family Support is not lined up correctly.

IMG_5449
IMG_54491013×1800 312 KB

On my wife’s iPhone 6 and RW Preview and Simulate - it lines up correctly.

59%20pm
59%20pm551×1000 156 KB

Is it possible for someone to check on their phone screen and let me know how it looks for you.

I can not work out why on iPhone 6Plus it looks off - tested on both Safari and Chrome both mobile browsers show Family Support out of line.

Any suggestions please.

Thanks
Scott

2

This is likely due to the fact that equal height columns revert to non-equal height at the mobile breakpoint, per the documentation page:

Please Note: Both the Equal Height and Vertical Centering features revert to normal content at the Mobile breakpoint.

Personally I always leave the mobile columns set to 12 units. The better tool for doing what you’re doing here, since you have varying height content, and if you want to keep a 6 unit size at mobile, might be the Grid stack from Potion Pack, IMO.

3

Hi Adam,

Yep, ok thanks.

Have changed over to Grid stack as you suggested and work better as wanted.

Thanks
Scott

1 Like