Responsive Instagram embed grid wont work on duplicated Webflow page

Design help General
1

Summary:
Using Snapwidget for my Instagram feed had been working flawlessly until one refresh I noticed that the height of the grid was getting cropped and not filling automatically. Thankfully I had made a duplicate version of my site and when I look at it there, the grid still works perfectly fine. I’ve double checked the widget code to make sure nothing changed and all of the settings are the same between the two webflow files. I have no idea how this happened and would love the help if anyone can figure out what’s going on here.

Steps to view issue:
• View my old project where the Instagram grid displays properly: https://preview.webflow.com/preview/hearthandhammer?preview=eac71a996244da5af913359b643676f3

• View my current project where the Instagram grid heigh is clipping the full grid: https://preview.webflow.com/preview/hearthandhammer21102635?preview=f34c43c7c0c22f73059aac038fd8db01

Screenshots:

Correct…

1165×844 1.49 MB

Incorrect…

1616×896 860 KB

Thanks in advance all!

2

Maybe this does the trick?

Differences on the Instragram-Section
Original: margin-top and margin-bottom: 0
Current: margin-top and margin-bottom: auto.

3

Thanks for looking and the suggestion, but unfortunately that didn’t fix it. I’m so stumped on this thing.

4

Two other suggestions.

But first a compliment. I totally like the design. Well done.

Suggestion 1:
I had a similar problem with embedding a twitter feed. The problem wasn’t in the embedded code, but in the settings of the widget. In twitter I could enter a specific height (default: 600px) which overrid every other assigned style.
As I notice that the profiles differ in the embed, you might check that out.

Suggestion 2:
What if you add the “height=auto” or height=“100%” to the embedded code as such:

<!-- SnapWidget -->
<script src="http://snapwidget.com/js/snapwidget.js"></script>
<iframe src="http://snapwidget.com/in/?u=aGVhcnRoYW5kaGFtbWVyfGlufDEyNXw1fDR8fG5vfDB8bm9uZXxvblN0YXJ0fHllc3x5ZXM=&ve=070615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:100%;"></iframe>
5

Thank you much for the kind words! Happy to hear the design is well received with someone unfamiliar with it :smile:

I tried both suggestions, the first did work-ish and by cranking the height up to 1200px it would display the full gird. The weird thing was though that it erased anything after that section. For example, if I moved it to where the “Latest Products” section is, everything below it simply disappeared. So weird.

I finally realized that it really wasn’t worth the time to keep messing with this thing and found another widget at http://instansive.com/ which is near identical and works now perfectly.

Thanks again for the help, and once I push this live in about a month I’ll do a project share so you can see it all polished and buttoned up.

Cheers!

1 Like
6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.