Padding issue around GIF in blog
SOLVE
Hi everyone,
I am having some issues with the padding around a vertial GIF I'm placing in one of my blog posts. When I look at it on the editing side it looks fine, but not when I preview the article. I have looked at the source code, but I can't seem to find the issue. Any ideas?
Thanks in advance!
Editing view:
Preview:
Code:
<div class="hs-responsive-embed-wrapper hs-responsive-embed" style="position: relative; top: 0; left: 0; width: 100%; height: auto; border: none; overflow: hidden; padding: 0; max-width: 356px; max-height: 480px; min-width: 256px; margin: 0px auto; display: block; text-align: center;">
<div class="hs-responsive-embed-inner-wrapper" style="position: relative; overflow: hidden; max-width: 100%; padding-bottom: 134.83%; margin: 0;"><iframe class="giphy-embed hs-responsive-embed-iframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" xml="lang" src="https://giphy.com/embed/KZDwzaTX4CcGQ" width="356" height="480" frameborder="0" allowfullscreen="allowfullscreen" data-service="giphy"></iframe></div>
</div>
Accepted Solutions
.png "HubSpot Employee"){kind=icon}
The embed code you are using uses an iframe.
You will want to use the image link directly and click the insert image button instead. When the image is displayed within an iframe you don't have as much control over how it's displayed.
https://media.giphy.com/media/KZDwzaTX4CcGQ/giphy.gif 
