How to make HTML template notification body to make responsive for different devices such as Outlook, Mobile devices?

Rajesh
Kilo Explorer

‎11-06-2019 08:55 AM

 Hi Everyone,

While working on improving email notification design we are facing some issues to make email body responsive for different devices such as Outlook, Mobile, Web mail etc.

We have created a notification where an HTML table has been created with fixed size (table size: 700px). This looks fine on PC, however when we open in Mobile, users are experiencing some difficulties as they have to scroll to right or down to see full content of notifications.

To make it responsive for mobile devices, I tried using Media Queries CSS. However it seems not working well.

Please suggest if there is any examples or workaround for this issue.

 

Regards,

Rajesh.

Labels:
0 Helpfuls
  • 1,548 Views
2 REPLIES 2

DrewW
Mega Sage
Mega Sage

‎11-08-2019 12:55 PM

You need to be looking at this

https://www.campaignmonitor.com/css/

It will help in what styles are supported by different email clients.

 

0 Helpfuls

Sagar Agarwal
Mega Guru

‎11-08-2019 09:00 PM

Hi,

 

There is no direct way to implement this in service now. However, you can look into the ZURB Foundation for emails (CSS framework).

You can convert/build responsive templates using multiple utilities available in this framework and once done, you can copy the HTML source in the notification.

 

https://foundation.zurb.com/emails.html

 

Thanks

0 Helpfuls