CMS Development

DaniIngrao
Participante

Padding issue around GIF in blog

resolver

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 Me gusta
1 Soluciones aceptada
jmclaren
Solución
HubSpot Employee
HubSpot Employee

Padding issue around GIF in blog

resolver

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

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

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

Ver la solución en mensaje original publicado

3 Respuestas 3
DanielSanchez
Asesor destacado | Partner nivel Platinum
Asesor destacado | Partner nivel Platinum

Padding issue around GIF in blog

resolver

@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 🙂

jmclaren
Solución
HubSpot Employee
HubSpot Employee

Padding issue around GIF in blog

resolver

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

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

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

DaniIngrao
Participante

Padding issue around GIF in blog

resolver

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

0 Me gusta