CSS - Media Queries for email template not working

Question

I am working on an email template that needs to be responsive for mobile.

Here are my media queries:

@media only screen and (max-width: 639px){
    .mobileHide{display:none !important;}
}

And my html:

<td style="padding:0 0 0 50px;margin: 0;vertical-align: top;" class="mobileHide">
    <div style="font-family: Calibri,Arial,sans-serif;font-size:64px;font-weight:bold;color:#fec326;margin:0;">1</div>
</td>

The problem I am having is the .mobileHide element is hidden when viewed on desktops on a resolution above 639px

I need it to be visible on desktops and hidden on mobile.

Any ideas or help with this is much appreciated! :)

Answer 1

You need to reverse your styling, so:

.mobileHide {
    display: none;
}

@media only screen and (max-width: 639px){
    .mobileHide { 
        display:block !important; 
    }
}

(max-width: 639px) says that the maximum width the page can be for this style to be applied is, in this case, 639px, so you want this to be display: block. Now for less than 639px we can define the more general rule, which is display:none and will be applied for >639px