GIFs Stretching on Mobile

vonBurske · October 11, 2019, 2:28am

Hello, I am creating a portfolio site and when I add a GIF to a CSS grid layout, the GIF stretches vertically on mobile. It does not happen in the preview or when resizing on a desktop browser. See the attached screenshot. Any help would be greatly appreciated.

Here is my site Read-Only: https://preview.webflow.com/preview/norml?utm_medium=preview_link&utm_source=designer&utm_content=norml&preview=ab9e79893b5eabf01f95eaf3437bd00d&mode=preview

vonBurske · October 12, 2019, 1:02am

Can anyone offer assistance?

PixelGeek · October 12, 2019, 1:12am

Hi @vonBurske

Try setting a height to your images in the mobile breakpoint:

Mobile safari might not be loading CSS Grid correctly.

vonBurske · October 16, 2019, 1:51am

@PixelGeek It looks like that worked! I am not sure what I did wrong the first time I tried to implement your advice. I just set the height to 100% and it is working now. Thanks, Nelson!