I’ve added the new Instagram Feed element to my site, but the dimensions are incorrect on physical mobile devices. In the builder and through mobile (emulator via developer mode in Firefox), it displays correctly. I’ve all browsing data and tried different mobile browsers (in my case, Firefox & Safari), but I keep getting the same result.
When reducing the columns down to 1 on mobile, the images cover their respective elements rather than fit inside their elements.
Yup, currently the element breaks when there are videos or carousels as we were notified in this report: WIP: Instagram Feed not showing videos. We’re looking into how possible it would be to either embed videos & carousels or at least skip them to avoid the layout issues they’re currently causing.
Thank you for sharing the login details and the test page. It seems like this is a Safari issue (always is). I have added this to our internal bug tracker
I’m suspecting it has something to do with the fact we have the combination of object-fit: cover; and height: 100%;, might need to set the width to 100% explicitly as well.
Unfortunately, I don’t think this would be released as part of a hotfix but hopefully could be included in the 1.9.2 release.
You mentioned that you’ve also experienced this on Firefox, that is the iOS version correct? Because on iOS all browsers are just wrappers around Webkit so they’re practically all similar to Safari in that regard.
As for object-fit options yeah I think that should be possible to add