{"id":3539,"date":"2017-09-30T22:28:58","date_gmt":"2017-09-30T22:28:58","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3539"},"modified":"2017-11-09T00:43:32","modified_gmt":"2017-11-09T00:43:32","slug":"radio-input-bug-causes-media-queries-to-activate-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/radio-input-bug-causes-media-queries-to-activate-in-internet-explorer\/","title":{"rendered":"Radio Input Bug Causes Media Queries to Activate in Internet Explorer"},"content":{"rendered":"<p>When creating interactive email be careful if your design contains checked radio elements as it can cause some quirks when viewed in some Webmail clients like Yahoo! Mail and AOL Mail on Internet Explorer.<\/p>\n<pre class=\"lang:default decode:true \" >\r\n&lt;style&gt;\r\n\/* this mq gets activated in Yahoo! Mail in IE *\/\r\n@media screen and (max-width:400px){\r\n   .wrapper{ width:100%; }\r\n   ...\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;div class=&quot;wrapper&quot;&gt;\r\n&lt;input type=radio checked&gt;\r\n...\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>This article goes over how max-width media queries that reference elements that wrap checked radio elements gets activated in some webmail clients (but not others) in Internet Explorer and a few ways to work around the problem (such as using max-device-width).<\/p>\n<p><a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/radio-input-bug-causes-media-queries-to-activate-in-internet-explorer\" rel=\"noopener\" target=\"_blank\">Read the article<\/a>.<\/p>\n<p><BR><BR><\/p>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When creating interactive email be careful if your design contains checked radio elements as it can cause some quirks when viewed in some Webmail clients like Yahoo! Mail and AOL Mail.<\/p>\n","protected":false},"author":2,"featured_media":3531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[48,28],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3539"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3539"}],"version-history":[{"count":2,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3539\/revisions"}],"predecessor-version":[{"id":3541,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3539\/revisions\/3541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/3531"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}