Wierd gaps in between sections/blocks on safari browser

Store Design
, , , ,

Topic summary

A Shopify store owner encountered Safari-specific rendering issues on product pages: unwanted gaps between sections and border-radius not applying to product images. These problems didn’t occur in other browsers.

Solution provided:

  • Custom CSS code targeting Safari’s Flexbox rendering differences
  • Includes fallback support for browsers that don’t support CSS gap property
  • Adds -webkit-border-radius and overflow: hidden to force border-radius on images

Implementation steps:

  1. Navigate to theme customization or code editor
  2. Add CSS to Custom CSS section or base.css file
  3. Test across Safari desktop and mobile

Outcome: The CSS fix successfully resolved both the spacing gaps and border-radius issues. Issue marked as resolved.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello Community! I cant figure out how to remove a few gaps that appear on my website product page only on the safari browser! in other browsers the website looks amazing but i dont know why safari, doesnt ajust the layout properly, is there any fix for this issue?? also, the border radius applied to the product images also doesnt shows.

my website product page: SCLPTED LIGHT™

Thank you in advance.

1 Like
2

Hello @sclpted Safari Gap and Border-Radius Fix for Product Pages
Safari sometimes renders extra gaps and ignores border-radius styling on images due to differences in how it handles Flexbox and image containers.
You can fix both issues by adding this CSS to your theme:

/*  Fix spacing issue in Safari (fallback if flex gap is not supported) */
.products-container {
  display: flex;
  flex-wrap: wrap;
}
@supports not (gap: 1rem) {
  .products-container {
    margin: -0.5rem;
  }
  .products-container > * {
    margin: 0.5rem;
  }
}
@supports (gap: 1rem) {
  .products-container {
    gap: 1rem;
  }
}

/*  Fix border-radius not applying to images in Safari */
.product-media {
  border-radius: 12px;
  overflow: hidden;
}
.product-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  -webkit-border-radius: inherit;
}

How to apply:

  1. Go to Online Store → Themes → Customize → Theme Settings → Custom CSS (or Edit Code → base.css).

  2. Paste the code above.

  3. Save and test on Safari (desktop and mobile).

Thank you :slightly_smiling_face:

3

Really aprecciated! worked!

1 Like