How can I make CSS media query gaps work on an older iPhone 5 with iOS 10.3.4 and Safari for my Ecommerce site using Webflow?

Older iPhones like the iPhone 5 running iOS 10.3.4 with Safari have limited support for modern CSS features like gap in flexbox layouts. Here's how to make layouts look consistent on those devices using Webflow.

​

1. Understand the Issue with gap on Older iOS

​

• Safari on iOS 10 (and earlier) does not support gap in flexbox layouts.
• gap is supported with CSS Grid but only on Safari 12.1+.
• Only Safari 14 and up fully support flexbox gap.

​

2. Use Margin Instead of gap in Flex Layouts

​

• In Webflow, select your flex container.
• Instead of relying on gap, add margin to your child elements:
• Add a right or bottom margin on all but the last item.
• This mimics spacing but works consistently across all browsers.

​

3. Create a Selector for the Last Item

​

• To avoid double spacing, add a combo class or use Webflow's :last-child style selector.
• Target the last item in the flex list to remove the margin.

​

4. Check for Flex Gap Usage in Webflow

​

• Go to the Style panel and look for any gap values inside flex containers.
• Replace or supplement those with margins to ensure backward compatibility.

​

5. Use Grid Responsibly (Only if Needed)

​

• If you're using Grid in Webflow, note that older Safari versions partially support it.
• Safe fallback: Include manual spacing with padding/margins if layout breaks.

​

6. Test with Safari on iOS 10

​

• Use an actual device or a simulator (from Xcode) to test layout rendering.
• You can also use cross-browser testing tools like BrowserStack to preview on Safari iOS 10.

​

Summary

​

To support gap on older devices like iPhone 5 with iOS 10.3.4, do not rely on flexbox gap in Webflow. Instead, use manual margins on child items and remove them on the last item using selectors to ensure consistent layout.