Bugfix: Instagram Feed misplaced after implementation of the new widget view bar

We have several Instagram widgets in use. From one day to the next, without having changed anything in the settings, our Instagram widget is now arranged incorrectly.
It has moved both downwards and slightly to the right. And therefore cut off.
I suspect that this is related to the new view toolbar.
This takes up space and moves the widget. Can you switch it off - I only see limited added value?
Irrespective of this, the widget is also shifted for normal users and doesn’t look nice at the moment! Please fix it quickly!

1 Like

Add the new view bar at the end. Then it won’t move anything. Provided it is flush with the front of the widget.

1 Like

Hi there @ask_ev :wave:

I am really sorry for the inconvenience!

Could you please send me a link to the page where your widget is installed? I’ll gladly check it for you :slightly_smiling_face:

In the meantime, you can hide the informational panel using this code in the Custom CSS field on the Style tab of your widget’s settings:

.global-styles, .eapps-widget-toolbar {
  display: none !important;
}

Hello Max,

Thank you very much for the quick response!
Hiding with the CSS code has worked.
Unfortunately, the widget is still moved …


www.ask-ev.de
Website (elf.site)

Many thanks and best regards!

1 Like

We’ve fixed the issue by adding this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles,
.elfsight-app-d2c69ef3-f113-4db7-95dc-6a6b6d0b9abf {
	margin: 0 auto;
}

Check your widget and let me know if it’s fine now :slightly_smiling_face:

I tried the fix but this one only centers the widget in the middle.
A new created example also have this space:


Maybe it’s not a bug but a new feature. The widget target group can’t deal with CSS and take care of the border themselves?
But that takes away my freedom to decide whether and how wide the border of my widget should be. I don’t want a border at all.
Is it possible to hide it via CSS or the widget settings?
Thank you!

1 Like

Ah, sorry for misunderstanding!

In the screenshot below, you’ve shown that you’d like to remove spacing on the left and on the top.

Do I understand right that you’d like to move the widget to the top left corner?

Or maybe you’d prefer to increase the widget’s size so that there wouldn’t be this spacing instead of just moving it?

Hello Max, the size of the widget is great. But now there is a space left and above (in the elfsight widget itself). I want to move it to the top left corner.
If I open https://d2c69ef3f1134db795dc6a6b6d0b9abf.elf.site/ I want it in the top left corner. No space left and on the top. Maybe there is also space on the bottom and on the right.

Previously, this space did not exist and it was always displayed without a border. Suddenly, and without any changes on our part, it is now present on all widgets.
How can we remove it? Thank you!

1 Like

Got it, thanks!

Please try to use this code instead and let me know if it helped:

.global-styles,
html[lang='en'] body[style] {
  padding: 0 !important;
}

thanks for the fix, it looks perfect again!:pray::pray::pray::pray:
One last question, maybe you know it right away: How can I hide the red banner ‘:heart: I liked some time ago’?
image
Many thanks!

1 Like

Sure! This code should do the trick:

.eapps-instagram-feed-posts-item-red-like {
  display: none;
}

Perfect, thank you very much!
I’ve saved the code snippets for future widgets. Now it’s great :pray:

2 Likes

You are always welcome!

By the way, we have a CSS Codes category where you can find the most popular codes for different apps (including Instagram Feed). Feel free to check it out :wink:

1 Like