Extra space between vertically stacked components in mobile Safari

So I use desktop pages even on my iPhone. I just like it better. Call me weird… call me a criminal… I just like it better to have the full desktop functionality instead of a mobile page. Desktop pages render well in Safari except that there is an extra… say 20px to 50px of space between vertically stacked components. So if I have a wrapper component and underneath it I have a responsive grid component, there is much more space between the two when viewed in mobile Safari than in desktop Chrome. Anyone know of any way I could address this?


I’m having trouble reproducing this issue (on my test page it didn’t add any extra space).

  • What version of Skuid are you on?
  • What iPhone are you using?
  • Do you have any CSS on your page that could be causing that extra space?
  • Does this happen even on a simple page that has just a few components?

Thanks for the reply, Amy… - Skuid 8.15.8 -iPhone 6 with latest software - I do have some CSS, but nothing that should effect padding or borders or gaps or margins in that way. It only happens on vertical “row” spacing not horizontal “column” spacing. It even impacts responsive grids that wrap to the next row. - seems to be all my pages. It is just more noticeable with recent layouts I’m building that are more sensitive to the vertical space issue.

Hmm. Are you using a standard theme or a custom theme? Do you need to update your themes?

Hmmm… custom theme. I did have some CSS in the theme that I did not need any more so I deleted it, but it did not fix the issue… I updated themes recently and they do not need updating currently. I wrap most components in wrappers. Did you try vertically stacked wrapper components in a responsive grid? That may be a common theme as I typically put all components in wrappers in responsive grids.