Instagram companent with new instagram ratio

Finsweet Components
1

Description

Hi there, I’m trying to adjust the Instagram component to better display the new ratio rather than the old 1:1. Is this possible? How could this be done?

Thank you.

Site URL

Required: Please provide a staging/production URL where we can see the issue

  • URL: [Your staging URL here]
  • Webflow Read-only link: [Your Webflow Read-only link here]

Steps to Reproduce

  1. [First step]
  2. [Second step]
  3. [Third step]
    …

Expected Behavior

[What did you expect to happen?]

Actual Behavior

[What actually happened?]

Video/Screenshots

Required: Please provide a short screen recording showing the issue

  • Video link: [Loom/Screen recording URL]
  • Screenshots (if applicable): [Upload or link to screenshots]

Additional Context

  • Browser: [e.g., Chrome 120, Safari 17]
  • Device: [e.g., Desktop, iPhone 14]

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

@landy.concepcion

To adjust your Instagram component to display the new rectangular ratios instead of the old 1:1 format, you’ll need to target the Instagram images with some custom CSS.

Add this to your project in Designer > Project Settings > Custom Code > Head Code:

<style>
.fs-instagramfeed-4_image {
  aspect-ratio: 4/5; /* Instagram's new portrait ratio */
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Alternative for landscape posts */
.fs-instagramfeed-4_image.landscape {
  aspect-ratio: 1.91/1; /* Instagram's landscape ratio */
}
</style>

The .fs-instagramfeed-4_image class targets your Instagram images, and the aspect-ratio: 4/5 gives you Instagram’s new portrait ratio. The object-fit: cover prevents image distortion by cropping instead of stretching.

:flexed_biceps: You could also try a simpler approach by just setting a fixed height on your image container elements and letting the images fill that space naturally.

What specific ratio are you looking to achieve? If you let me know, we can provide more exact CSS values. Make sure to test with various Instagram image sizes to ensure consistency.

@Support-Luis and @Support-Pedro are available if you need more complex styling beyond this CSS approach.

1 Like