Hide iframe and replace with hyperlinked picture dependent on @media

[brianrfrench]

Hi all,

The page I'm working on is here http://www.crosstalkglobal.org/become-sponsor using the Minimum Pro Theme. I'm having issues similar to this post: http://www.studiopress.community/topic/responsive-iframe/

Rather than continue to fight with the iframe properly resizing on iphones and ipads (not sure about android or amazon fire devices), I'd like to hide it depending on the screen size. I've set up a div class called .donation-container on the page. Here is the css for the iframe:

/* Donation Container so clover donations hides on smaller screens and is replaced with a donate button */

.donation-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    /* overflow: hidden; */
    max-width: 100%;
}

.donation-container iframe, .donation-container object, .donation-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Here's the website page text:

The need for effective biblical communicators has never been more urgent, your partnership has never been more important.  Join us!
<div class="donation-container-mobile"><a href="https://crosstalkglobal.cloverdonations.com/3/"><img class=" aligncenter" style="border: none;" src="https://s3.amazonaws.com/sharedassets.cloverdonations.com/share-form/give-green-big.png" alt="" width="125" height="39" /></a></div>

<div class="donation-container"><iframe style="border: 0;" src="https://crosstalkglobal.cloverdonations.com/1/" width="300" height="150"></iframe></div>

How can I add the div donation-container-mobile to hide when above a certain size and show below a certain screen size, and vise-versa for the div donation-container? Should I add display: block and hide to the css in @media settings area, the .donation-container area (etc), or do something else?

Thanks for the help!

http://www.crosstalkglobal.org/become-sponsor

[Susan]

As you posted this a while ago, I hope you were able to get your issue resolved. If it is resolved, please mark this thread as “resolved”, so it can be closed.

If you are still having issues, report back here, and I will try to escalate.

[brianrfrench]

Thanks, will do!

[Author]

Posts