Responsive design not being applied in sendGrid - css

Question

I'm trying to apply responsive design in sendGrid. When I preview it in the website preview it is working, but when I send the test email and view it on mobile, I see that the #media screen has not been applied. Does anyone know what could be happening?
{{#if rewardData.deals.[0].coupon}}
<style>
#media screen and (max-width:300px) {
.teste {
width: 100% !important;
}
.firstDiv {
display: inline-block !important;
}
}
</style>
<div class="firstDiv" style="display: flex;
align-items: center;
border: 1px solid #D9D9D9;
border-radius: 8.49px;
padding: 16px;
margin: 35px 35px 25px 28px;">
<div class="teste" style="text-align:left; display: inline-block; margin-right: 16px">
<img class="max-width" style="border-radius: 8px" data-proportionally-constrained="true" data-responsive="false" src="{{rewardData.deals.[0].wideBanner}}" alt="Banner da recompensa">
</div>
<div class="teste" style="display: inline-block;">
<div style="display: flex; align-items: center; margin-bottom: 14px">
<img style="border-radius: 8px; margin-right: 8px" width="32" src="{{rewardData.deals.[0].icon}}" alt="Logo da recompensa">
<p style="display: inline-block; vertical-align: super">{{rewardData.deals.[0].title}}</p><br>
</div>
<b style="font-size: 12px; text-align: left; color: #2B332E">{{rewardData.deals.[0].shortDescription}}</b><br><br>
<b style="font-size: 12px; text-align: left;">Resgatar recompensa</b>
</div>
</div>
<div style="font-family: inherit; text-align: inherit; color: #000000; font-family: helvetica, monospace; font-size: 14px; margin-bottom: 50px; margin-top: 25px; margin-bottom: 25px; padding: 0px 40px">
<img class="max-width" border="0" style="color: #000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; vertical-align: bottom;" width="16" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/92d7128873c0e80b/6ee5ec4b-aaad-46cb-9c96-d5d61fb7231d/72x72.png">
<strong style="padding-left: 5px">Como usar minha recompensa?</strong><br><br>
<div style="line-height: 18px">
{{rewardData.deals.[0].description}}
<b>Seu voucher tem validade de até 30 dias para ser usado.</b>
</div>
</div>
{{/if}}

Answer 1

Many email clients do not support #media statements.
The website preview is a useful tool to preview your work, however it cannot show how an email will render across different mail clients.
Is there a way you can achieve your responsivenice without a media query?

Answer 2

Many mobiles are more than 300px wide, so try increasing the max-width from 300 to about 450.
Otherwise, take note of which email client you sent to and whether it supports media queries: https://www.caniemail.com/features/css-at-media/
There's quite a lot of code you use that is not supported. Email has an added layer or two to web design, in that email clients only accept a subset of HTML & CSS - more akin to HTML4 and CSS2, but there are lots of exceptions.
So, it may also not be working because flex is not supported, or align-items (flex is more widely supported, but all of the other parts of flexbox like align-items are very poorly supported).
I'd suggest you take a totally different approach and you'd need to research how to do a responsive HTML email as the topic is much too large for one question.