Media query isn't working for email

Question

I'm trying to code a responsive design email-- I've combed through here and couldn't find anything that exactly helped. I'm really not seeing any part of my @media query coming through-- the images are staying at the size I coded in the @media query, and not resizing back in browser. The mobile style for the fonts I've coded also aren't sticking. Here's some of the code:

<style type"text/css">
body {background-color: #e5e5e5}
p {
    font-size: 13px; 
    font-family: verdana; 
    line-height: 21px;
    color:#4B5460;
     }
a {
    font-family: verdana; 
    font-weight: bold; 
    text-decoration: underline; 
    color: #4B5460;
}
.footer_link {
    font-weight: normal;
    text-decoration: none;
    color:#0c5bba;
    font-size: 11px;
}

@media screen and (max-width:480px) {
    .graf_font {
        font-size: 16px;}
    }
    .reg_button {
        max-width:200px;
    }
    .mobile_hide {
        display: none;
    }
    .chiclets {
        max-width: 100px;
    }
    .snapshot {
        max-width:75px;
    }
}
</style>

Let me know if you need more code-- I'm a beginner with this, so I know I'm missing something glaring!

Thanks!

Answer 1

It looks like you have an extra closing bracket.

.graf_font {
    font-size: 16px;} /* <-- remove this bracket */
}

Also check to make sure the email client your in even supports media queries. https://litmus.com/help/email-clients/media-query-support/

Answer 2

Max-Width is not fully supported for email. I have found using percentages to be a useful alternative (eg width=80%). If you can make images take up a certain percentage of the screen or table cell on mobile images instead of being a particular pixel width it may be more successful. If you still aren't having success, try adding !important after your CSS.

Also, you'll want to style your text inline, as a lot of that will get stripped by different email clients.

I would also suggest that you check out https://litmus.com/community . It is a newly free source with a lot of up-to-date info on email design and people who know a lot more about email design than me.