Responsive email: @media in head

  • Resolved RJ

    (@rolandjosuran)


    4 years, 1 month ago

    This is really a great plugin and it runs smoothly. I want to make the emails prettier on mobile devices and for this making them responsive. The only way I know is to add a <style> tag with an @media query in the <head> section of the email. Unfortunately those tags are removed when pressing “save notification” in the editor.

    How can I add <style>, <head> or even <html> tags to the emails, or is there an other way to make the emails responsive?

    Thanks anyway for this amazing plugin!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    Thanks for your message.

    You used to be able to do this so let me investigate to see why HTML might be being stripped from a notification.

    Thread Starter RJ

    (@rolandjosuran)

    4 years, 1 month ago

    Thank you. I haven’t tried this in the past, so I don’t know if it worked once. But now the <style>, <head> and <html> tags are stripped off.

    Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    Can you confirm you’re using the latest version of WP (5.9) and BNFW (1.8.10)?

    Thread Starter RJ

    (@rolandjosuran)

    4 years, 1 month ago

    Hi,
    Yes WP 5.9 and BNFW 1.8.10.

    Thread Starter RJ

    (@rolandjosuran)

    4 years, 1 month ago

    Hi @voltronik

    HTML comments (<!-- -->) are messed up too. I want to integrate the following tag to display the email in MS outlook:

    <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"><![endif]-->

    which is converted to:
    <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"><![endif]-->

    It is probably a matter of configuring TinyMCE.

    Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    I couldn’t see any different between the before and after code snippet in your previous message. Are you able to double check and re-post?

    Thread Starter RJ

    (@rolandjosuran)

    4 years, 1 month ago

    LOL, please excuse this silly mistake.
    The < and > were converted to HTML entities, but obviously correctly interpreted here. 🙂

    I try it again:
    <!--[if !mso]><!-- --><link href="https://..." rel="stylesheet" /><!--<![endif]-->
    is converted to (the <link> is stripped off):
    ‘<!–[if !mso]&_g_t_; –>&_l_t_;!–‘

    I also did some investigations from my side.

    • I have unfiltered_html capability
    • Disabled other plugins
    • I can use this HTML in Gutenberg editor (post/page)
    • Some tags are stripped when switching from text to visual editor
    Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    Ok, thanks.

    Let me investigate and i’ll get back to you.

    Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    Just released 1.8.11 of the plugin which should fix this.
    Let me know if you have any more issues with it though.

    Thread Starter RJ

    (@rolandjosuran)

    4 years, 1 month ago

    You are genius @voltronik !
    It works like a charm.

    One comment just for the record: When I switch from text to visual editor and back, some tags are still stripped. But this is actually understandable, because the visual editor is creating its own HTML. So, I just use the text editor, and everything works perfectly.

    Thank you very much for this fast fix and this great plugin!

    Plugin Author Jack – BNFW

    (@voltronik)

    4 years, 1 month ago

    Hi @rolandjosuran,
    Thanks.

    Yes, I agree. I think this is actually a quirk of the TinyMCE editor, as opposed to something BNFW is doing.

    If you like BNFW and the support, please feel free to leave an honest review.

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

The topic ‘Responsive email: @media in head’ is closed to new replies.