-
AuthorPosts
-
June 6, 2017 at 3:15 pm #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!
MarissaJune 7, 2017 at 7:13 pm #805241Hey 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,
VictoriaJune 12, 2017 at 6:35 pm #807007Hello,
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>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;”><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”;ref.parentNode.insertBefore(js, ref);}(document));</script>June 12, 2017 at 7:55 pm #807045Hi,
Did you add the code provided by Victoria?
Best regards,
John TorvikJune 12, 2017 at 8:08 pm #807051Hi 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 #808032Hi Marissa,
Please, put the code I gave you above in Theme options > General Styling > Quick css and get back to us :)
Best regards,
VictoriaJune 27, 2017 at 3:12 pm #813461Hello,
I followed the instructions, but there is still a large amount of space underneath my infographic.
Marissa
June 28, 2017 at 4:09 pm #813922Hi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.