Responsive design not being applied in sendGrid

Michelle Mendonça 0
Viewed 37

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>
        <a href="https://hmg-recompensas.minu.co/transferencia?rewardId={{rewardData.rewardId}}" style="background-color: {{rewardData.experience.sponsor.customBonuz.backgroundColor}}; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:10px 36px 10px 36px; text-align:center; text-decoration:none; border-style:solid; align-items: center;" target="_blank"><b style="font-size: 12px; text-align: left;">Resgatar recompensa</b></a>
    </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}}

handlebars.js media-queries responsive-design sendgrid css
2 Answers

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?

philnash0

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.

useryowB0
Related