Attempting to develop a responsive email, I've included the following tag in my email template:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In addition, I've implemented specific styling attributes for mobile devices like so:
@media only screen and (max-device-width: 799px) {
div[class="column"] {
width: auto!important;
float:none!important;
}
.reasonDiv {
float:none!important;
padding-left: 12px!important;
padding-top: 35px!important;
}
.image {
width: 10px;
height: 10px;
}
.message {
padding-top: 10px!important;
}
.productImage {
width: 64px!important;
height: inherit!important;
}
.siteLogo {
width: 180px!important;
}
}
However, I'm facing an issue where these styling attributes are not being applied on mobile devices. Any solutions or suggestions would be greatly appreciated. Thanks!