Controlling height and width of

  • lindsay.smith

    (@lindsaysmith)


    6 years ago

    Hi there

    I’ve been working with your theme for awhile and it’s been amazing but I’ve run into an issue. I’m trying to embed an infographic from the Piktochart.com app using an <iframe> code they provide through the share option, but I’m running into an issue where the full width post is overriding the height and width parameters I have in the code.

    I understand that by default on the full width post it sets the element to equal 100% width but it doesn’t do the same for height and therefore is cutting off the bottom of my graphic.

    I haven’t been able to successfully set the height to 100% or get the theme to reference the height and width parameters inside my iframe code.

    Do you have any suggestions? I use this theme for a series of student blogs and would like to keep using it but we use a number of apps that require media to be embedded with iframe codes so it would be great to find a solution.

    I should also mention, we have updated to the Gutenberg editor and are using the custom html block to place our iframe embed code.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Amit Singh

    (@apprimit)

    Hello,

    Add this code in the custom HTML block –

    <div class="iframe-container">
<iframe width="400" height="800" frameborder="0" scrolling="no" style="overflow-y:hidden;" src="https://create.piktochart.com/embed/36100673-extreme-weather"></iframe>
</div>

    And add the below CSS code to the Customize > Custom CSS section – 

    .iframe-container {
    position: relative;
    padding-bottom: 20.25%;
    padding-top: 100%;
    height: 0;
}
.iframe-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

    Clear cache, reload the site and let me know it works or not.

    Thread Starter lindsay.smith

    (@lindsaysmith)

    Hello,

    Thank you! That did the trick in terms of displaying the full height of the iframe. And this will certainly work as a workaround for us.

    Is this something you’d be open to including in a future update?

    I appreciate your help!

    Amit Singh

    (@apprimit)

    Hello,

    Sure, we will consider it to add it in the future update to fix the iframe height issue.

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Controlling height and width of’ is closed to new replies.