Hi, I created an email template from scratch and while looking in a preview mode, it seamed like it's working on mobile. But, when I tested the email in a deliverability tool, it showed me that the template is not responsive - it looks the same as on a desktop. Do you have an idea an how to solve this?
Hi @Dragana ,
Are you using Media Queries in your code? If not try the following media queries that would render the email on all mobile devices and tablets. You need to put this code in <style> tag in <head> section.
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Change the breakpoints if you are targeting any specific device.
Hope it helps.
Thank you.
Prashanth
Hi Prashanth,
thank you for your answer. I am using media queries, just like you wrote. When I go to preview, the template looks fine for mobile devices. The problem is that it doesn't work when I do complete testing with deliverability tool. Then it shows different.