Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #804527

    Hello,

    I just published an infographic on my blog using a code from Piktochart. It looks great on desktop. However, on mobile – there is a bunch of space between the bottom of the infographic and my last line of text.

    Here’s the link to the blog: http://twosixdigital.com/blog/state-tourism-twitter-study-infographic/

    Thanks!
    Marissa

    #805241

    Hey marissaconniff,

    How are you adding the infographic? The iframe gets the height of 4495px and it’s a lot for mobile. Do you have it set somewhere?

    
    @media only screen and (max-width: 450px) {
    .avia_codeblock iframe {
      height: auto !important;
      min-height: 1800px !important;
    }
    }
    
    @media only screen and (max-width: 1024px) {
    .avia_codeblock iframe {
      height: 100% !important;
      min-height: 2800px !important;
    }
    }
    

    Best regards,
    Victoria

    #807007

    Hello,

    I pasted the code from piktochart into the “code block”.

    Here’s the code:
    <iframe width=”800″ height=”4495″ frameborder=”0″ scrolling=”no” style=”overflow-y:hidden;” src=”https://magic.piktochart.com/embed/22482420-state-tourism-twitter-study-by-twosix-digital”></iframe&gt;

    They also provide this code as an option:
    <div class=”piktowrapper-embed” pikto-uid=”22482420-state-tourism-twitter-study-by-twosix-digital” style=”height: 300px; position: relative;”><div class=”embed-loading-overlay” style=”width: 100%; height: 100%; position: absolute; text-align: center;”>Loading...<p style=”margin: 0; padding: 0; font-family: Lato, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px”>Loading…</p></div><div class=”pikto-canvas-wrap”><div class=”pikto-canvas”></div></div></div><script>(function(d){var js, id=”pikto-embed-js”, ref=d.getElementsByTagName(“script”)[0];if (d.getElementById(id)) { return;}js=d.createElement(“script”); js.id=id; js.async=true;js.src=”https://magic.piktochart.com/assets/embedding/embed.js&#8221;;ref.parentNode.insertBefore(js, ref);}(document));</script>

    #807045

    Hi,

    Did you add the code provided by Victoria?

    Best regards,
    John Torvik

    #807051

    Hi There,

    Sorry! I didn’t realize I was supposed to add that code.

    I just tried it. It appears as text below my infographic (even though I added it into a code block).

    Marissa

    #808032

    Hi Marissa,

    Please, put the code I gave you above in Theme options > General Styling > Quick css and get back to us :)

    Best regards,
    Victoria

    #813461

    Hello,

    I followed the instructions, but there is still a large amount of space underneath my infographic.

    Marissa

    #813922

    Hi Marissa,

    Try this code instead:

    
    @media only screen and (max-width: 450px) {
    .avia_codeblock iframe {
      height: auto !important;
      min-height: 1800px !important;
    }
    }
    
    @media only screen and  (min-width: 451px) and (max-width: 768px) {
    .avia_codeblock iframe {
      height: auto !important;
      min-height: 2600px !important;
    }
    }
    
    @media only screen and  (min-width: 768px) and (max-width: 1024px) {
    .avia_codeblock iframe {
      height: 100% !important;
      min-height: 3400px !important;
    }
    }
    @media only screen and  (min-width: 1024px) {
    .avia_codeblock iframe {
      height: 100% !important;
      min-height: 3700px !important;
    }
    }
    

    Best regards,
    Victoria

    • This reply was modified 7 years, 4 months ago by Victoria.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.