Streaming live at 10am (PST)

Responsive Image Height different under safari and chrome and firefox

Hi all,
I am currently experiencing an issue on a website I am designing for myself. The issue is that on my portfolio-grid page, I am displaying a grid of images distributed across two columns.

Under chrome and firefox all the images in this grid are of equal height, however, in Safari, there are two images(Napa & SLD Residence) whose height is 600pixels instead of 358px.

The images are coming from a CMS. When I had uploaded the images into the CMS to be used as thumbnails, these were all uploaded as 800x600pixels and heavily compressed from my end. Additionally, I ran the command - ( CMD + SHIFT + I) to create responsive images as per the webflow tutorial.

Inspecting the HTML code, for the two images (Napa & SLD Residence), I saw that the responsive images weren’t included as part of their markup. However, when I looked at the other images, they did have their responsive images listed in the markup. I can’t figure out why this has happened.

Additionally, I don’t know why Safari is causing an issue on these two images (Napa & SLD Residence).

Finally, I am running custom scripts (Locomotive Scroll) and disabling the scripts still shows the same problem.

Any advice is greatly appreciated.

– edit
Removed project links after solving the problem.

Well I worked out the issue. It looks like under the largest breakpoint of 1900pixels, the image height was set to auto when in fact it should have been 100%. On the smaller breakpoints, I had already done this.

This article helped me out: Images stretched in Safari and Chrome | CSS-Tricks