How can I fix the issue with images not enlarging in Safari when resizing the browser window in Webflow?

Published on
September 22, 2023

To fix the issue with images not enlarging in Safari when resizing the browser window in Webflow, you can follow these steps:

  1. Check Safari compatibility: Make sure that the version of Safari you're using is compatible with the responsive image functionality in Webflow. You can refer to the Webflow documentation or contact Webflow support for more information on which Safari versions are supported.

  2. Enable responsive images: In Webflow, make sure that the responsive images feature is enabled for the relevant images. To do this, select the image and open the settings panel. Under the "Image" tab, check if the "Enable responsive images" option is turned on. If not, enable it.

  3. Specify image dimensions: Safari requires explicit dimensions specified in the HTML code for images to resize correctly when the browser window is resized. To ensure that the images enlarge properly in Safari, you need to specify the desired width and height attributes for the image elements. This can be done in Webflow by selecting the image element and entering the dimensions in the width and height fields in the settings panel.

  4. Publish and test: After making the above changes, publish your website and test it in Safari by resizing the browser window. The images should now enlarge correctly when the window is resized.

  5. Clear cache: In some cases, caching issues can prevent the changes from taking effect immediately. If you're still experiencing the issue after following the above steps, try clearing the browser cache in Safari and then reload the website to see if that resolves the problem.

By following these steps, you should be able to fix the issue with images not enlarging in Safari when resizing the browser window in Webflow.