Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 6, 2017 at 3:15 pm #804527
    marissaconniff

    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

    June 7, 2017 at 7:13 pm #805241
    Victoria

    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

    June 12, 2017 at 6:35 pm #807007
    marissaconniff

    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>

    June 12, 2017 at 7:55 pm #807045
    John Torvik

    Hi,

    Did you add the code provided by Victoria?

    Best regards,
    John Torvik

    June 12, 2017 at 8:08 pm #807051
    marissaconniff

    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

    June 14, 2017 at 2:58 pm #808032
    Victoria

    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

    June 27, 2017 at 3:12 pm #813461
    marissaconniff

    Hello,

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

    Marissa

    June 28, 2017 at 4:09 pm #813922
    Victoria

    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, 5 months ago by Victoria.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.