Media queries in html email

Resolved

Anonymous User 16052280

(@anonymized-16052280)

Hi Chad,

Is there an issue with using media queries inside the Registration is Moderated email body?

I am successfully using the same html email code with several plugins but only WP-Members returns this error: print screen.

These are the first lines of my html email code and the only ones containing media queries:

<div class="c1" style="background-color:#f9f9f9">
	<table style="max-width:650px;margin:0 auto" cellspacing="0" cellpadding="0">
		<tbody>
            <style type="text/css">
                @media only screen and (max-width:590px){
                    .c1{
                        background-color:white !important;
                    }
                    .c3a,
                    .c3b{
                        width:100% !important;
                    }
                }
                @media only screen and (max-width:1270px){
                    .c2,.c4{
                        background-color:#f7f7f7 !important;
                    }
                }
                @media only screen and (min-width:590px) and (max-width:1270px){
                    .c1{
                        background-color:#f7f7f7 !important;
                    }
                }
            </style>
			<tr class="c2" style="background-color:#f9f9f9">
				<td align="center" style="padding:30px 0">

I am using the minified html email code with all the plugins.

Thank you,
Andrei

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

Plugin Author Chad Butler
(@cbutlerjr)

7 years, 12 months ago

WP-Members uses WP functions to sanitize submitted data in order to prevent any vulnerabilities in the application. In this case, it applies WP’s wp_kses() function (kses stands for “KSES Strips Evil Scripts”). The default applied to this function is essentially the same as for posts in WP.

So although I need to test to be sure, I suspect that this may be nullifying the @media and/or the brackets {}. I’ll look into it and if it’s something that can be adjusted, it will be in whatever the next release ends up being (meaning, if I can get to it before 3.2.0 is officially released, then it will be that one, otherwise the next release after that).

Thread Starter Anonymous User 16052280
(@anonymized-16052280)

7 years, 12 months ago

Hi Chad,

I’ve been trying for a couple of hours to fix this in my child theme .php using wordpress documentation on kses but it’s beyond my coding skills.

Since most of my users open their emails on phones not being able to use media queries makes it impossible for me to use WP-Members.

Any .php code to fix this would be greatly appreciated.

Thank you,
Andrei
Plugin Author Chad Butler
(@cbutlerjr)

7 years, 12 months ago
After looking into it, it’s the <style> tag that’s not allowed in the WP’s list of default allowed tags. You can add it with the wp_kses_allowed_html filter as follows (accounting for the one tag attribute you’re using – “type”):
```
add_filter('wp_kses_allowed_html', 'my_allowed_tags');
function my_allowed_tags($tags) {
	$tags['style'] = array( 'type' => true, );
	return $tags;
}
```
Thread Starter Anonymous User 16052280
(@anonymized-16052280)

7 years, 12 months ago

Lovely, tested it and working great 🙂

Thank you Chad !

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

The topic ‘Media queries in html email’ is closed to new replies.

Tags