Flex/Grid Properties Are Deleted in Gmail Email

Flex / Grid properties are deleted in gmail email

Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.

In the world of HTML e-mail, embedded and external styles are bad, CSS3 is bad, JavaScript is bad, while.. inline styles and tables for layout are good. In this world, old-school coding methods are alive and well.

It's not surprising that Gmail will strip out CSS3 properties. Your best bet is to stick to tables and inline styles.


UPDATE: Gmail now supports embedded styles.


More information:

  • CSS in HTML Email
  • Best practices for styling HTML emails
  • Best Practices & Considerations when writing HTML Emails

Inline Grid related CSS disappear in Gmail

This is because grid and most recent CSS novelties are not supported on most email clients because of integration problems, security and network. Consult this useful guide to learn what works and what doesn't on which email clients :

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

For example : only Aol Alto, Thunderbird, Outlook (Mac and Android) and iOS > 10 support grid for now.

Best practices for styling HTML emails

Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.

You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.

Drag Drop functionality in grid, .net

you can simply use this

All drag & drop settings are contained in Grid.DragAndDrop property. The following properties should be set to true to use drag & drop feature:

Grid.AllowDrop = true;
Grid.DragAndDrop.Enabled = true;


Related Topics



Leave a reply



Submit