Padding issue around GIF in blog

SOLVE
DaniIngrao
Participant

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:

Editing view.jpg

 

Preview:

Final view.jpg

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>

0 Upvotes
1 Accepted solution

Accepted Solutions
jmclaren
Solution
HubSpot Employee

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

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

View solution in original post

3 Replies 3
jmclaren
Solution
HubSpot Employee

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

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

View solution in original post

DaniIngrao
Participant

Perfect. Thank you so much for your help, Jon. Really appreciate it!

0 Upvotes
DanielSanchez
Key Advisor

@DaniIngrao 

 

1) Download the GIF file

save-archive.PNG

 

2) Upload this file in you HubSpot Media, as you do with a normal image.

 

Dont use iframe for this.

 

Regards 🙂