BlackBerry Email Responsive Queries

Question

I'm creating an email template in MailChimp, and I have some responsive code that I want to work for the devices that support it (primarily iOS Mail and BlackBerry Mail apps).

While the template loads the responsive media queries correctly in the iOS Mail app, they don't appear to trigger within the BlackBerry Mail app. I am testing on both a BlackBerry Z10 and Q10 with the same up-to-date OS.

My media query looks like this:

@media only screen and (max-device-width: 600px) {
        #templateContainer {
            width: 100% !important;
        }       
        .globalLogo {
            width: 90% !important;
        }
        .logoBox {
            display: block !important;
            width: 100% !important;
        }
        .imageBox {
            width: 100% !important;
            display: block !important;
            height: 40px !important;
            border-left: none !important;
        }
        .emailTitle {
            text-align: center !important;
        }
        #title {
            border-top: 3px solid #FFF !important;
            width: 100% !important;
            display: table !important;
        }
        .topImageRow {
            display: none !important;
        }
        .tableofcontents {
            margin:0 0 30px 0 !important;
            list-style: outside !important;
            width: 90% !important;
        }
  }

I've also added the following viewport meta tag to the header:

<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">

I've experimented with max-width instead of max-device-width, but it doesn't seem to make a difference. I've also tried 800px instead of 600px, and removing the "only screen and" from the media query.

Any help would be greatly appreciated.

Answer 1

Final Answer:

Send it to a different email account domain. It can sometimes be the security filters at your workplace, so if you're sending it to you@yourwork.com, try hooking up you@yourotheremail.com to your blackberry and checking it there.

---

Original:

Not really a definitive answer, but hopefully this will get you closer...

Create a really easy media query to trigger (something like max-width:99999px;) and change the color or something really noticeable. Does it work at all?

If it is triggering, step your way down until it stops. If you can't get it to trigger at 99999px, it doesn't support media queries, even though the support charts suggest it does.

Sometimes your server can strip the media queries, so try testing it on different domain also, particularly if you have any sort of corporate server or software.

Another thing you could do is try and view the output code to see if your CSS is still intact. Not sure how to view this on a Blackberry though.