I'm using Auth0 email template to send emails. I've customized the template with using my own design and I want to make sure that it works for mobile, but the media query isn't working.
Here are my styles:
<style>
@media (min-width:640px) {
.sm_table-cell {
display: table-cell !important;
}
.sm_w-full {
width: 100% !important;
}
.sm_w-1-5 {
width: 20% !important;
}
.sm_w-3-5 {
width: 60% !important;
}
}
@media (max-width:600px) {
.content-wrapper{
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
Table with content-wrapper class:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"
style="width: 100% !important; max-width: 500px; background-color: white; border-radius: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
class="content-wrapper">
</table>
I've tested this in Gmail and Yahoo. Yahoo also ignores the linear gradient background I'm applying to the body tag:
<body
style="margin: 0; padding: 0; min-width: 100%; height: auto; background: linear-gradient(90deg, #E7E6FC, #B6B2F9); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
Am I doing anything wrong?