support – publish canva design to wp site

  • 2raybell · Member ·

    Hello, here’s what I need help with. My website is WP dinkytownadvertising.com. I’m trying to embed Canva code html to publish the land page but it appears in mobile format. Canva tells me it’s an iframes issue with WP. Ideally, I can publish this landing page on my site and have a responsive page that customers can view on any device.

    WP.com: Yes
    Jetpack: No
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • jmills39 · Staff ·

    Hi there,

    Thank you for reaching out with your question!

    I understand you’re having trouble embedding Canva code on your website, dinkytownadvertising.com. It seems the embedded landing page appears in a mobile format, and Canva suggested it might be an issue with iframes on WordPress.

    Here are a few steps to help you publish a responsive landing page that displays correctly on all devices:

    Responsive Iframe Embed:

      • You can try embedding the Canva code within a div container that forces the iframe to be responsive. Here’s a sample code snippet:
        <div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”> http://YOUR_CANVA_EMBED_CODE </div>
      • Replace YOUR_CANVA_EMBED_CODE with the actual embed code from Canva.

      Using a Plugin:

        • Consider using a plugin like “Advanced iFrame” or “Iframe” which can help in managing the iframe properties and making it responsive.

        Check Theme Settings:

          • Ensure that your WordPress theme supports responsive design. If not, you might need to adjust the theme settings or custom CSS to ensure responsiveness.

          Custom CSS:

            • You can add custom CSS to your theme to ensure iframes are responsive. Here’s an example of what you might add to your theme’s CSS file:
              css .responsive-iframe { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
            • Wrap your iframe in a div with the class responsive-iframe.

            Since your site is hosted on WordPress.org, these steps should help you achieve a responsive design for your Canva landing page. If you’re still facing issues, your hosting provider might be able to provide additional support.

            If you’re considering migrating to WordPress.com for more direct support and a range of enhanced features, we currently offer a free migration service. You can request it here or simply reply to this message to get started.

            To learn more about the differences and benefits between WordPress.com and WordPress.org, please refer to our detailed comparison guide.

            If you have any other questions or need further assistance, feel free to reach out. We’re here to help!

          Reply to support – publish canva design to wp site