Padding issue around GIF in blogSOLVE
Nov 27, 2019 9:23 AM
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!
<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>
Solved! Go to Solution.
Nov 27, 2019 10:58 AM
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.
Sr. CMS Developer Advocate
- Get started developing on the HubSpot CMS
- Developer Changelog
- Creating an efficient CMS Development workflow
- CMS Developer Tutorials
- 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.