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.
Removed project links after solving the problem.