• I give up. I have been trying to figure out how to hide the embedded livestream.com player (which is unfortunately Flash) from the page it’s embedded in when someone is using an iPhone or iPad (which, of course, do not support Flash). I tried @media queries, but could not understand it/get it to work. The element is embedded using [iframe] shortcodes.

    The element is on peterbuffett.com/wordpress

    (I’ve only started learning wordpress, so this page is a WIP.)

    But note – I’ve removed the @media queries from the CSS because I couldn’t get them to work at all. Also, I want to hide everywhere *but* desktop, since (regardless of operating system) I can’t figure out how to get the size of the iframe to be responsive, anyway.

    Thank you so much for any help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Try something like this in your :

    @media only screen and (max-width: 320px) {
      iframe.livestream {
        display: none;
      }
    }

    That should hide the iframe for any device with <= 320px screen sizes.

    If that does not work, then maybe we have another option:

    Add this code to your stylesheet.

    @media only screen and (max-width: 320px) {
      .hide-me {
        display: none;
      }
    }

    Install the Widget CSS Classes plugin. Put your iframe in a widget position using the Text widget or preferably the Black Studio TinyMCE widget (a separate plugin).

    With the Widget CSS Classes plugin activated, you will see a CSS Class: field in your widget editor. You would put hide-me (no period) into that field and save.

    See what the results are. If that doesn’t work, we can explore further! 🙂

    Thread Starter flanneldanl

    (@flanneldanl)

    worked great! thanks!

    You’re very welcome. Best wishes on your site development!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Hiding Flash elements on iPhone and iPad’ is closed to new replies.