[iOS 16.4] Fix for a rendering bug on Impact

Starting from Safari 16.4 (iOS 16.4 and macOS), Apple has introduced a significant bug in the browser that causes some sections, such as the collection list in our theme Impact to render incorrectly. We have immediately reported the bug to Apple, and hope this to be fixed in the next version of Safari.

In the meantime, there is a simple fix that you can apply to fix the problem.

1. Open the theme editor, click on the "Theme settings" icon on the left (outlined by the first arrow), then click on "Custom CSS" (outlined by the second arrow):

2. In the Custom CSS box, copy-paste the code below. If you already have some code in the box, add the code at the end:

.content-over-media {
  grid-template: 0 minmax(0, 1fr) 0 / minmax(0, 1fr) minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-gap, var(--content-over-media-column-gap, var(--container-gutter))) * 2)) minmax(0, 1fr) !important;

It should look like this (Shopify may reformat the code, this is normal):

3. Save, and wait a few seconds until the change propagates on your store.