SOLVED: Incorrect Instagram Images Dimensions (Instagram Feed Element)

Hi All,

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.


I have also a question:

In my case the Instagram feed shows only pictures but not diashows or Videos.

Looks like this, the first one is a diashow/video:

Hi @Khalill,

Thank you for your report. Can you please share a URL where you’re facing this issue? I’m unable to replicate this locally.

Hi @ARAKZ,

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.

Hi Charaf,

I’ve just replied to your email w/ login details.

Please use the Test Page (it’s not indexed).

Hi Khalill,

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 :slight_smile:

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.

Hi Charaf,

Cheers for the quick response. It tends to happen over in Firefox land as well, unfortunately.

Do you think this will be part of a hotfix release?

Also, is it possible to grant users more option under object-fit (cover / contain / fill)?

Cheers!

Hi @Khalill,

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 :slight_smile:

1 Like

Hi Khalill,

We’ve fixed this issue in Bricks 1.9.2 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on any production/live website. It is only meant for testing in a local/staging environment.